{% load otree static %}

{% block styles %}
    {% include '_templates/styles/intro_page.html' %}
{% endblock %}


{% block content %}
<div class="tab" style="display: block">
    <div class="card">
        <h5 class="card-header">Question 2</h5>
        <div class="card-body">
            <p>
                Suppose an employer employed a worker for a wage of <b>{{ q2_wage }}</b> and requested <b>{{ q2_effort_requested }}</b> effort. <br>
                The worker decided to provide <b>{{ q2_effort_received }}</b> effort.
            </p>
            <p>
                 What profits would the worker and the employer make in this case?
            </p>

            {{ formfield 'quiz2_worker' }}
            {{ formfield 'quiz2_employer' }}

            <div style="margin-top: 20px;"></div>
            <hr style="border-top: 1px solid #ccc;">
            <button type="button" class="btn btn-outline-secondary" id="show-info-button" onclick="showInformation()" style="display: block">Click for information on how profits are calculated</button>
            <button type="button" class="btn btn-outline-secondary" id="hide-info-button" onclick="hideInformation()" style="display: none">Click to hide information</button>

            {% if player.participant.is_employer == True %}
                {% include '_templates/includes/quizInfo_employer.html' %}
            {% else %}
                {% include '_templates/includes/quizInfo_worker.html' %}
            {% endif %}
          </div>
    </div>
</div>

<br>

{{ next_button }}

{% endblock %}


{% block scripts %}

    <script src="{% static 'javascript/hideInformation.js' %}"></script>
    <script src="{% static 'javascript/showInformation.js' %}"></script>

{% endblock %}