{% extends "global/Page.html" %}
{% load staticfiles otree %}


{% block content %}

<h1>Instructions</h1>

<div class="container p-3 my-3 border" style="font-size:14pt">
<h2> Stage 1 - Work </h2>

<p>In this stage you must count the number of zeros in a series of tables that will consecutively appear on your screen. For each table you will earn £1, once you input the correct number of zeros.</p>
<p> Afrer you counted correctly a table, a new table is generated, with randomly defined number of zeroes.</p>
<p> You will have {{Constants.time_tables}} seconds to solve as many tables you can.</p>
<p> This is an example of the table you will be asked to count </p>
<br>
<center><img src="{% static "real_effort/table.png" %}" width=200/><br></center>
<br>
<p> The number of zeroes for this specific table is 36.</p>

</div>

<div class="container" style="font-size:16pt">
  <div class="row" style="padding-left:135px;">
    <div class="col-md-10">
    </div>
    <div class="col-md-2">
      <button name="btn_submit" value="True" class="btn btn-primary btn-large">
         <span style="font-size:18pt">Continue</span>
     </button>
    </div>
  </div>
</div>


{% endblock %}



{% block styles %}

<style>
.otree-body {
   max-width:1200px
}

input[type=radio] {
  transform: scale(1.5);
  margin: 12px -10px 0px -30px;
}
input[type=checkbox] {
  transform: scale(1.5);
  margin: 12px 10px 0px -30px;
}
</style>

	<!-- <link href="{% static "guilt_IS/mystyle.css" %}" rel="stylesheet"> -->
{% endblock %}