{{ block title }}
Part 2
{{ endblock }}
{{ block content }}
<style>
    .interval_row {
        width: 10%;
                border: 1px solid black;

    }

    p {
        text-align: justify;
    }
    tr, th, td {
        border: 1px solid black !important;
    }

</style>

<b>Decision 1</b>
<p>
    At this moment, Person As are being asked to provide their guess of the amount transferred by Person B in Part 1 of
    this session. Person As’ payment depends on how close their guess of this amount is to the average amount
    transferred by all Person Bs in this session. We ask you to guess what the Person A you were matched with in Part 1
    predicted that this number would be. Please see below the relevant question that is being answered by each Person A.

</p>
<p>
{{if player.treatment == "T1" or player.treatment == "T1_B"}}
                   <img id="bracket_less" class="bracket_less" src="{{ static 'img/t1_personA_choice.png' }}"/>
    {{else}}
                       <img id="bracket_less" class="bracket_less" src="{{ static 'img/t2_personA_choice.png' }}"/>

    {{endif}}

</p>
<p>

    Please now provide your guess of in which of the 13 intervals below the Person A you were matched with guessed
    Person B’s transfer would lie.

</p>
<p>

    If this is your decision-that-counts and the number guessed by the Person A you were matched with does lie in the
    interval you select, you will earn CZK 200 in additional payment.
</p>

<p>
    <table class="table-bordered text-md-center container row-eq-height" style="width:20%; border-spacing: 5px;border-collapse: separate">
   {{if player.treatment == "T1" or player.treatment == "T1_B"}}
      <tr>
        <td id="1" class="interval_row" onclick="selectInterval(this)">-75 to -50</td>
    </tr>
     <tr>
        <td id="2" class="interval_row" onclick="selectInterval(this)">-49 to -25</td>
    </tr>
     <tr>
        <td id="3" class="interval_row" onclick="selectInterval(this)">-24 to -1</td>
    </tr>
    {{ endif}}
    <tr>
        <td id="4" class="interval_row" onclick="selectInterval(this)">0 to +25</td>
    </tr>
    <tr>
        <td id="5" class="interval_row" onclick="selectInterval(this)">+26 to +50</td>
    </tr>
    <tr>
        <td id="6" class="interval_row" onclick="selectInterval(this)">+51 to +75</td>
    </tr>
    <tr>
        <td id="7" class="interval_row" onclick="selectInterval(this)">+76 to +100</td>
    </tr>
    <tr>
        <td id="8" class="interval_row" onclick="selectInterval(this)">+101 to +125</td>
    </tr>
    <tr>
        <td id="10" class="interval_row" onclick="selectInterval(this)">+151 to +175</td>
    </tr>
    <tr>
        <td id="11" class="interval_row" onclick="selectInterval(this)">+176 to +200</td>
    </tr>
    <tr>
        <td id="12" class="interval_row" onclick="selectInterval(this)">+201 to +225</td>
    </tr>
    <tr>
        <td id="13" style=" border: 1px solid black;" class="interval_row" onclick="selectInterval(this)">+226 to +250</td>
    </tr>

</table>
<script>
    function selectInterval(e){
        let interval_rows = document.getElementsByClassName("interval_row")
        for (let i = 0; i <  interval_rows.length; i++) {
            interval_rows[i].classList.remove('btn-primary')
        }
        document.getElementById(e.id).classList.add("btn-primary")
        document.getElementById("decision1_B").value = e.id


    }
</script>

</p>

<div class="float-end row">
    <button class="otree-btn-next btn btn-primary btn-danger">Next</button>
</div>
<input type="hidden" name="decision1_B" id="decision1_B"/>


{{ endblock }}