{% load otree static %}

{% block content %}
    <div class="card mt-5">
        <div class="card-body">
            <h3 class="card-title">Instructions</h3>
            <p class="card-text">
                In this part of the experiment, you will receive 4 signals that give you insight into whether the first suitcase (purple) is more or less expensive than the second (black). After each signal, you will be asked to reassess the probability that the first suitcase (purple) is more expensive.
            </p>
            <ul>
                <li>Each signal you receive is <strong>70% accurate</strong>. This means:
                    <ul>
                        <li>If the first suitcase (purple) is more expensive, there is a <strong>70% chance</strong> you will correctly receive a "first (purple) is more expensive" signal and a <strong>30% chance</strong> you will receive an incorrect "first (purple) is less expensive" signal.</li>
                        <li>If the second suitcase (black) is more expensive, there is a <strong>70% chance</strong> you will correctly receive a "first (purple) is less expensive" signal and a <strong>30% chance</strong> you will receive an incorrect "first (purple) is more expensive" signal.</li>
                    </ul>
                </li>
            </ul>


            <p class="card-text">
             Please note: Details about the prices of the suitcases (which is more expensive) will not be disclosed at any stage of the experiment.
        </p>
            </p>
            <form method="post">
                <button type="submit" class="btn btn-primary mt-3">Continue</button>
            </form>
        </div>
    </div>
{% endblock %}