{{ block title }}
    Section 1: Instructions
{{ endblock }}
{{ block content }}

<script>
      // function weights yellow with p_y% for the yellow box
  function yellowrandomCase(p_y,N){
      let n_yellow = 0
      var n_green = 0
      // Sequences
    let random_seq = ''
    for (let i = 0; i < N; i++) {
      var n = Math.floor(Math.random()*100);
      if (n<p_y) {
        random_seq += "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
        n_yellow++;
      }else {
        random_seq += "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
        n_green++;
      }
    }
    // Samples
    let yellow_marble = "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
    let yellow_sample = yellow_marble.repeat(n_yellow);
    let green_marble = "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
    let green_sample = green_marble.repeat(n_green);
    let sample = yellow_sample + green_sample
    // Call number of marbles
      var n_green_text = document.getElementById("n_green_Y");
      n_green_text.textContent = n_green;
      var n_yellow_text = document.getElementById("n_yellow_Y");
      n_yellow_text.textContent = n_yellow;
      // Call sample
    document.getElementById("yellow_sample").innerHTML = sample;
      // Call sequences to html
    document.getElementById("random_seq").innerHTML = random_seq;
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
  }

  // function weights yellow with p_g% for the green box
  function greenrandomCase(p_g,N){
      let n_yellow = 0
      var n_green = 0
    let random_seq = ''
    for (let i = 0; i < N; i++) {
      var n = Math.floor(Math.random()*100);
      if (n<p_g) {
        random_seq += "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
        n_green++;
      }else {
        random_seq += "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
        n_yellow++;
      }
    }
    // Samples
    let yellow_marble = "<img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='50' height='50'/>";
    let yellow_sample = yellow_marble.repeat(n_yellow);
    let green_marble = "<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='50' height='50'/>";
    let green_sample = green_marble.repeat(n_green);
    let sample = yellow_sample + green_sample
      // Call sample
    document.getElementById("green_sample").innerHTML = sample;
      var n_green_text = document.getElementById("n_green_G");
      n_green_text.textContent = n_green;
      var n_yellow_text = document.getElementById("n_yellow_G");
      n_yellow_text.textContent = n_yellow;
      // Call sequences to html
    document.getElementById("green_seq").innerHTML = random_seq;
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
  }
</script>

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
</style>
<p>
    In this experiment,
    you will report your predictions about the probabilities in percentage points (%).
    Where 0 means that you are sure the event didn't happen and 100 that the event certainly happened;
    any number in between means you think the event occurred with a certain chance.
</p>
<p>
    In this experiment, you will be asked to select the strategy you and another participant would use in different scenarios of a similar problem.
    That strategy will be the best guess of the probability given some information.
    The computer will apply your reported strategy to determine your payoffs at the end of the section.
</p>

<h3>Problem to Consider: Boxes, Marbles, and Samples</h3>

<p>
    There are two types of Boxes filled with five (5) marbles:
<ol>
    <li>The <strong>Yellow Box</strong> has three (3) yellow marbles and two (2) green marbles.</li>
    <center>
        <p>
            <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: yellow;
            border-color:black">
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='35' height='35'/>
        <BR>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='35' height='35'/>
    </button>
    </p>
    </center>
    <li>The <strong>Green Box</strong> has three (3) green marbles and two (2) yellow marbles.</li>
    <center>
        <p>
            <button type="button"
        onclick=""
        style="width: 120px; height: 120px;
            background-color: green;
            border-color:black">
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='35' height='35'/>
        <BR>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='35' height='35'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='35' height='35'/>
    </button>
    </p>
    </center>
</ol>

    Then, the probability of drawing one yellow marble
    is equal to {{C.prob_y}}%
    if the Box selected is Yellow (three-fifths of the time a yellow marble is drawn)
    and {{C.prob_g}}%
    if the Box selected is Green (two-fifths of the time a yellow marble is drawn).

    The following table summarizes the probabilities associated with each Box:
</p>

<p>
<table>
<thead>
  <tr>
    <th>Box</th>
    <th>Marbles</th>
    <th> Probability <BR>(in percentage points) <BR> of drawing <BR> one <strong>yellow</strong> ball </th>
    <th> Probability <BR>(in percentage points) <BR> of drawing <BR> one <strong>green</strong> ball </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'/>
        <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/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>
        {{C.p_yellow_Yellow}}
    </td>
    <td>
        {{C.p_yellow_Green}}
    </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/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'/>
        <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/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'/>
    </td>
    <td>
        {{C.p_yellow_Green}}
    </td>
    <td>
        {{C.p_yellow_Yellow}}
    </td>
  </tr>
</tbody>
</table>
</p>

<h4>Random Samples</h4>

<p>
    The computer will randomly select one Box (Yellow or Green).
    Then, it will draw a sequence of {{C.N_size}} marbles from the selected Box,
    recording the color and <strong>replacing</strong> the marble in the Box after each draw.
    Then, the probability of drawing a yellow marble is always the same,
    and it is possible to draw 4 marbles of the same color from the Yellow or Green box since the marble is returned to the box after each draw.
</p>

<p>
    The number of yellow and green marbles is informative of the box selected.
    However, the specific order is not informative
    since each marble drawn has the same probability of being yellow.
    Then, two sequences with the same number of marbles of each color are considered the same sample.
</p>
<p>
    For example, all the combinations of one green marble and three yellow marbles are considered the same sample:
</p>
<p>
<table>
<thead>
  <tr>
    <th>Sequences</th>
    <th>Sample</th>
    <th>Number of <br>yellow marbles</th>
    <th>Number of <br>green marbles</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
    </td>
    <td rowspan="4">
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
    <td rowspan="4">3</td>
    <td rowspan="4">1</td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
    </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
    </td>
  </tr>
</tbody>
</table>
</table>
</p>

<h3>Generate a Sample</h3>

<p>
    There are 5 possible samples that can be generated from each Box
    (remember the marble is returned to the Box after each draw):
</p>
<p>
<table>
<thead>
  <tr>
    <th>Samples</th>
    <th>Number of <br>yellow marbles</th>
    <th>Number of <br>green marbles</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
    </td>
      <td>
          4
      </td>
      <td>
          0
      </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
      <td>
          3
      </td>
      <td>
          1
      </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
      <td>
          2
      </td>
      <td>
          2
      </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/a/a5/Wikisource_proofread_yellow.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
      <td>
          1
      </td>
      <td>
          3
      </td>
  </tr>
  <tr>
    <td>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
        <img src='https://upload.wikimedia.org/wikipedia/commons/8/89/Wikisource_proofread_green_circle.svg' width='30' height='30'/>
    </td>
      <td>
          0
      </td>
      <td>
          4
      </td>
  </tr>
</tbody>
</table>
</table>
</p>

<p>
    Click on each Box below to draw {{C.N_size}} marbles from it.
</p>

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

<p>
<table>
<thead>
  <tr>
    <th>Sequence</th>
    <th>Sample</th>
    <th>Number of <br>yellow marbles</th>
    <th>Number of <br>green marbles</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <p id="random_seq"></p>
    </td>
    <td>
        <p id="yellow_sample"></p>
    </td>
    <td>
        <p id="n_yellow_Y"></p>
    </td>
    <td>
        <p id="n_green_Y"></p>
    </td>
  </tr>
</tbody>
</table>
</p>

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

<p>
<table>
<thead>
  <tr>
    <th>Sequence</th>
    <th>Sample</th>
    <th>Number of <br>yellow marbles</th>
    <th>Number of <br>green marbles</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
        <p id="green_seq"></p>
    </td>
    <td>
        <p id="green_sample"></p>
    </td>
    <td>
        <p id="n_yellow_G"></p>
    </td>
    <td>
        <p id="n_green_G"></p>
    </td>
  </tr>
</tbody>
</table>
</p>

<p>
    Click the 'Next' button if you understand the process of drawing samples,
    or ask the experimenter if you have any questions.
</p>


    {{ formfields }}

    {{ next_button }}

{{ endblock }}