{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Instructions (2/4)
    <hr>


{% endblock %}

{% block content %}


    <p>Here's an example of what a decision screen will look like. At the top of the screen, you see the information you need to solve the guessing task. At the bottom, you enter your guess.</p>
    <hr>

    {% include "beliefs_default_manip/CardsBagsDrawIllustration.html" %}

    <h2>Decision 1: Your guess</h2>
    <hr>


    <p id="qn_post">
        Given that these balls were drawn, <b>how likely</b> do you think it is that Bag A has been selected (in %)?
    </p>

    <p>
        I believe it is <b><input type="number" min="0" step="0.01" max="100" name="answer" id="answer" required style="font-weight: bold; border-radius: 4px; width: 40px; border-width: 1px; margin-left:7px"> %</b> likely that Bag A was selected.
    <p>

        <br>

    <div style="text-align: right;">
        <button type="submit" class="btn btn-primary" id="submit_posterior">Submit your guess</button>
    </div>

{% endblock %}