{{ block content }}
<div class="card">
    <div class=card-header>
    <b>Agents A</b>
    </div>
    <div class="card-body">
    <p>
    People assigned to version A of the task completed 11 tasks correctly in 4 minutes.
    They completed correctly 86% of the tasks they attempted.
    The best performing agent completed 23 tasks correctly, while the worst performing agent completed 0 tasks correctly.
    The probability that a person assigned to version A outperforms a person assigned to version B is 91%.
    </div>
</div>
<br>
<div class="card">
    <div class=card-header>
    <b>Agents B</b>
    </div>
    <div class="card-body">
    <p>
    People assigned to version B of the task completed 3 tasks correctly in 4 minutes.
    They completed correctly 49% of the tasks they attempted.
    The best performing agent completed 8 tasks correctly, while the worst performing agent completed 0 tasks correctly.
    The probability that a person assigned to version B outperforms a person assigned to version A is 6%.    
    </p>
    </div>
</div>
<br>
<br>
<b>Comprehension Questions:</b>
<br><br>
<div class="card">
    <div class=card-header>
        <b>Which agents completed 11 tasks correctly on average?</b>
    </div>
    <div class="card-body">
        <div {{ if 'comp_eleven' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            {{ formfield 'comp_eleven' label=''}}
        </div>                        
    </div>
</div>
<br>
<div class="card">
    <div class=card-header>
        <b>Which agents completed 3 tasks correctly on average?</b>
    </div>
    <div class="card-body">
        <div {{ if 'comp_three' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            {{ formfield 'comp_three' label=''}}
        </div>                        
    </div>
</div>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>
{{ endblock }}