{{ block title }}
    Round Number {{player.round_number}}
{{ endblock }}
{{ block content }}
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
</style>

Remember the marble composition of each box:

<p>
<table>
<thead>
  <tr>
    <th>Box</th>
    <th>Marbles</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: yellow;
            border-color:black">
            Yellow Box
        </button>
    </td>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>
        <BR>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>
    </td>
  </tr>
  <tr>
    <td>
        <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: green;
            border-color:black">
            Yellow Box
        </button>
    </td>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>
        <BR>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>
    </td>
  </tr>
</tbody>
</table>
</p>

<p>
    Click in the randomly selected Box to generate the sequence of marbles from the box selected this round.
</p>

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

<p id="yellow_seq"></p>

<script>
  // function uses a random sequence generated in python.
  function yellowrandomCase(){
      let sample=js_vars.marble_sample;
      let N=js_vars.N;
    let random_yellow = ''
    for (let i = 0; i < N; i++) {
      var n = sample[i];
      if (n < 1) {
        random_yellow += "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
      } else {
        random_yellow += "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
      }
    }
    document.getElementById("yellow_seq").innerHTML = random_yellow;
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
  }
</script>

<div id="displaytable" style="display:none">
<p>
    <table border="1">
<thead>
  <tr>
    <th>Color</th>
    <th>Number of marbles</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>
    Remember the probabilities of the computer selecting the Yellow box, and participant 2's probabilistic beliefs:
</p>
<p>
<table>
<thead>
  <tr>
    <th>Box</th>
    <th>
      Probability that the computer selects each box
    </th>
    <th>
      Participant 2's believed probability that the computer selects each box
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: yellow;
            border-color:black">
            Yellow Box
        </button>
    </td>
    <td>
        90
    </td>
    <td>
        20
    </td>
  </tr>
  <tr>
    <td>
        <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: green;
            border-color:black">
            Green Box
        </button>
    </td>
    <td>
        10
    </td>
    <td>
        80
    </td>
  </tr>
</tbody>
</table>
</p>
<p>
    Please indicate the probability in percentage points (between 0 and 100) the Yellow box was selected,
    and the probability reported by participant 2 who has different beliefs.
</p>

    {{ formfield 'report' }}

    {{ formfield 'report_other' }}

    {{ next_button }}
</div>

{{ endblock }}