{{ block title }}
    Boxes, Marbles and Sequences
{{ endblock }}
{{ block content }}

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
</style>
<p>
    There are two types of boxes full of four marbles.
    The Yellow box has 3 yellow marbles and 1 green marble, while the Green box has 3 green marbles and 1 yellow marble.
    Then, the probability of drawing a single yellow marble is equal to 75% if the box selected was Yellow, and 25% if the box
    selected was Green.

    The next table summarizes the probabilities associated with each box:
</p>

<p>
<table>
<thead>
  <tr>
    <th>Box</th>
    <th>Marbles</th>
    <th> % of yellow balls</th>
    <th> % of green balls</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>
    <td>
        75
    </td>
    <td>
        25
    </td>
  </tr>
  <tr>
    <td>
        <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: green;
            border-color:black">
            Green 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>
    <td>
        25
    </td>
    <td>
        75
    </td>
  </tr>
</tbody>
</table>
</p>

<p>
  In each round,
</p>


<ol>
    <li> The computer randomly selects a Yellow or Green box.</li>
    <li> From the box selected, the computer will draw a sequence of 10 marbles, recording the color and replacing the marble
  in its box after each draw. </li>
    <li> You and another participant (participant 2) will observe that sequence of 10 marbles. </li>
</ol>

<h4>Generating Random Sequences</h4>

<p>
    You can click on each box to generate a different sequence of 10 marbles drawn from each one.
</p>

<!-- yellow box button -->
<button type="button"
        onclick="yellowrandomCase()"
        style="width: 120px; height: 120px;
            background-color: yellow;
            border-color:black">
    Yellow Box
</button>

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

<script>
  // function weights green with 25% and yellow with 75%
  function yellowrandomCase(){
    let random_yellow = ''
    for (let i = 0; i < 10; i++) {
      var n = Math.floor(Math.random()*100);
      if (n<25) {
        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;
  }
</script>

<!-- green box button -->
<button type="button"
        onclick="greenrandomCase()"
        style="width: 120px; height: 120px;
            background-color: green;
            border-color:black">
    Green Box
</button>

<p id="green_seq"></p>

<script>
  // function weights yellow with 25% and green with 75%
  function greenrandomCase(){
    let random_green = ''
    for (let i = 0; i < 10; i++) {
      var n = Math.floor(Math.random()*100);
      if (n<75) {
        random_green += "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
      }else {
        random_green += "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
      }
    }
    document.getElementById("green_seq").innerHTML = random_green;
  }
</script>

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

    {{ formfields }}

    {{ next_button }}

{{ endblock }}