{{ block title }}
    Practice Trial
{{ endblock }}

{{ block content }}
<p>
    Click on each box to generate 5 different sequences in each one.
</p>

<!-- yellow box button -->
<button type="button" onclick="yellowrandomCase()">
  <div style="width: 200px; height: 200px; background-color: yellow; border-color:blue"></div>
</button>

<p id="imagespace"></p>

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

<!-- green box button -->
<button type="button" onclick="greenrandomCase()">
  <div style="width: 200px; height: 200px; background-color: green"></div>
</button>

<p id="imagespace2"></p>

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


    {{ next_button }}
{{ endblock }}