{{ block title }}
    Sequence in Round Number {{player.round_number}}
{{ endblock }}
{{ block content }}


<script src='{{ static 'randomSequences.js'}}'></script>

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
</style>

<p>
    Click in the randomly selected Box to generate the sequence of marbles from the box selected this round.
    Remember that you and Participant 2 will observe the same sequence.
</p>

<p>
<!-- yellow box button -->
<button type="button"
        onclick="yellowrandomRound()"
        style="width: 120px; height: 120px;
            background-color: gray;
            border-color:black">
    Random Box <BR> {{player.round_number}}
</button>

<div id="displaytable" style="display:none">
    <table border="1">
<thead>
  <tr>
    <th>Color</th>
    <th>Number of marbles<BR>in the sequence</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>yellow</td>
    <td>{{player.round_yellow_n}}</td>
  </tr>
  <tr>
    <td>green</td>
    <td>{{player.round_green_n}}</td>
  </tr>
</tbody>
</table>
</p>

<p id="random_seq"></p>

    <h3>Make your Decision </h3>

<p>
    Remember that the probability of the computer selecting the Yellow box at the beginning of the round is <strong>90</strong>%,
    and Participant 2 believes that this probability is <strong>20</strong>%:
</p>
    After you and Participant 2 observed the sequence this round:

    {{ formfield 'report' label='What is the probability <strong>you</strong> believe the Random box is Yellow? (in %)'}}

    {{ formfield 'report_other' label='What is the probability <strong>Participant 2</strong> believes the Random box is Yellow? (in %)'}}

    {{ next_button }}
</div>


{{ endblock }}