{{ block title }}
    Practice Trials
{{ endblock }}

{{ block content }}
<p>
    Click on each box to generate different sequences in each one.
    Click 'Next' button if the process to generate the sequences is clear, or ask the experimenter if you have any question.
</p>

<!-- yellow box button -->
<button type="button"
        onclick="yellowrandomCase()"
        >
    <img src="{{ static 'Yellow.png' }}" width="250" height="200">
</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='{{ static 'green_small.png' }}' width='50' height='50'/>";
      }else {
        random_yellow += "<img src='{{ static 'yellow_small.png' }}' width='50' height='50'/>";
      }
    }
    document.getElementById("yellow_seq").innerHTML = random_yellow;
  }
</script>

<!-- green box button -->
<button type="button"
        onclick="greenrandomCase()"
        style="border-color:black">
    <img src="{{ static 'Green.png' }}" width="250" height="200">
</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='{{ static 'green_small.png' }}' width='50' height='50'/>";
      }else {
        random_green += "<img src='{{ static 'yellow_small.png' }}' width='50' height='50'/>";
      }
    }
    document.getElementById("green_seq").innerHTML = random_green;
  }
</script>


    {{ next_button }}
{{ endblock }}