{{ block title }}Block {{ part }}{{ endblock }}
{{ block content }}

    <p>
        In this block of {{ C.NUM_CLS_ROUNDS }} images, each image is either of <b>{{ category1 }}</b> or <b>{{ category2 }}.</b>
    </p>
        
 <h5>
     Helpful Tips:
 </h5>
     
 <ol>
 
     <li>Each image is drawn randomly from a pool of {{ ctegory1 }} images or a pool of {{ ctegory2 }} images. 
     The probability that each image is drawn from the pool of <b>{{ ctegory1 }} images is {{ prior }}%</b>,
     and the probability that each image is drawn from the pool of <b>{{ ctegory2 }} images is {{ prior_other }}%</b>. </li>
     
     <li>
     For each picture, you will have <b>{{C.TIMEOUT_S}} seconds</b> to enter the probability you think the image is {{ category1 }} or {{ category2 }}. 
     </li>
     <li>
     If you <b>do not submit</b> your answer within the time limit, you will have a 0% chance of winning the bonus payment if the image is randomly selected for payment</b>.
     </li>
     
     <li>You will not be able to go back to the previous images. </li>
 </ol>
 

<p>
Before beginning, you have <b>4 practice </b>images, which will not impact your payment. 
</p>




<br>

{% if part == 1 %}

    <p>
        <i>To make sure you have read the instruction, the next button will be activated after 10 seconds.</i>
    </p>
    
   <button disabled="disabled" id="problem" class="button2 btn btn-primary btn-large">Next</button>
   
{% else %}

    <button id="problem" class="button2 btn btn-primary btn-large">Next</button>
    
{% endif %}

   <script>
   window.onload = function() {
       window.setTimeout(setDisabled2, 10000);
   }

   function setDisabled2() {
       document.getElementById('problem').disabled = false;
   }

   </script>
{{ endblock }}