{{ block title }}
Random Box Selected
{{ 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>
    Every round,
    the computer randomly selects a Yellow or Green box.
    The box color is not revealed,
    and you will click on a Grey box that draws a sequence of 10 marbles from the selected box.
    What happens in a round does not affect the probabilities in other rounds.
</p>
<p>
    Notice that the number of yellow and green marbles is informative of the box selected.
    The specific order is not informative
    since each individual draw has the same probability of being yellow.
    Then, two sequences with the same number of marbles of each color are considered the same sequence.
</p>
<p>
  In every round,
    you and Participant 2 will bet on the probability the computer selected either the Yellow or the Green box
    to draw the sequence.
</p>
<p>
    Click on the Grey box to generate a sequence of 10 marbles.
    You will generate only one random sequence every round.
</p>

<!-- grey box button -->
<button type="button"
        onclick="yellowrandomRound()"
        style="width: 120px; height: 120px;
            background-color: gray;
            border-color:black">
    Grey Box
</button>

<div id="displaytable" style="display:none">
</p>
<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>



<p>
    Click the 'Next' button if the process to select the box is clear,
    or ask the experimenter if you have any question.
</p>

    {{ formfields }}

    {{ next_button }}

</div>

{{ endblock }}