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

{% block app_styles %}

    <link href="{% static "resource_management_2/instruction_styles.css" %}" rel="stylesheet">

{% endblock %}

{% block title %}
EXPERIMENT INSTRUCTIONS
{% endblock %}

{% block content %}

    <div id="firstInfo">
        <p>Dear Participant,</p>
        <p>Thank you for participating in today’s experiment. Please switch off your cell phone, do not talk to other participants, and do not communicate with others using the PC. If you have any questions, please raise your hand and the instructor will come to you.</p>
        <p>In this experiment, you have been randomly assigned to a role of the manager of a technology company. The company is based in Denmark and has a wide range of its own locally designed and manufactured products as well as a large number of customers and retailers. Since the company was established the revenue has been slowly growing and according to the latest analysis is expected to reach the peak any time soon. However, its current performance is mediocre and the board is pressuring you to invest in the current business units in a way that would ensure that the company’s growth continues and its place in the market is stable. However, you are only allocating resources to the two divisions, Division A and Division B, which will further allocate the received resources and you will not have influence on that. Additionally, you will be aware after each period of time what have they done and what is the performance of the business units and the divisions.</p>
        <p>Thus, you, as the manager, have to make some important decisions that can influence the company’s performance outcomes.</p>
        <div class="imgBlockStyle">
            <img src="{% static "resource_management_2/hierarchy_with_middle_managers.jpg" %}" width="400">
            <p class="imgText">Figur 3: Hierarchical setup of the firm.</p>
        </div>
        <p>Please, press ‘Next’ to continue with instructions.</p>
        <button id="nextBtn" type="button" class="otree-btn-next btn btn-primary nextBtnPlacement">Next</button>
    </div>

    <div id="secondInfo" style="display: none">
        <p>In the following section you can read about your task in the experiment. Please remember, not talk to other participants, and do not communicate with others using the PC. If you have any questions, please raise your hand and the instructor will come to you.</p>
        <h5>Your task</h5>
        <p>In each round you need to decide how many of your available {{resources}} resources you will allocate to the two business divisions, that will further allocate them to the business units and play important role in the company. You will need to make these decisions in total for  {{Constants.num_rounds}} rounds.</p>
        <p>You will see your allocation decision for each division and further allocation done by divisions to business units in each round in the column indicated by ”RA” and the outcome of your allocation decisions in the column indicated by ”P” (Please see the Experiment interface figure below). The outcome of your allocation indicates the performance of each of the business units, which is influenced by your allocation decision. It can be 0, which means the business unit’s project was not successful in that period, thus you will find an empty cell as your outcome value.</p>
        <p>However, you can also receive a value of 1 or above, which indicates the business unit had more successful projects in that current round (The successful project will be highlighted with a colored cell, please see it on the Experiment interface figure below). Your main goal of the experiment is to have as many as possible successful projects through {{Constants.num_rounds}} rounds by allocating {{resources}} resources per round. Please note, you need to allocate all the available resources in all the rounds.</p>
        <div class="imgBlockStyle">
            <img src="{% static "resource_management_2/demo_view_with_middle_manager.jpg" %}" width="700">
        </div>
        <p>You can decide how many resources you are willing to give to each division by choosing the corresponding button. You need to allocate all the resources you have (In total you will have {{resources}} resources available in each round).</p>
        <p>Once, you have chosen how you will allocate them you can press ”Allocate” and you will see the outcome values of your allocation decision in the column ”P”, as well as your allocation decisions in the column ”RA”. Additionally, you will also see how the Divisions A and B allocated the resources further to the Business Units.</p>
        <p>You need to make these allocation decision for the {{Constants.num_rounds}} rounds. Please note, once you have pressed ”Allocate” you cannot change the allocated amounts and you will start with the next round. After you make your last decision you will see the ”Results” page, which will show you the total number of successful projects you have achieved during the {{Constants.num_rounds}} rounds. Your payment will be calculated according to the total number of the successful projects.</p>
        <p>This is the end of the instructions. By pressing the ‘Next’ button we assume you have read and understood the instructions of the Experiment. If you have any additional questions, please ask the instructor before you proceed. Also, please do not close the browser at any time. After you have completed the {{Constants.num_rounds}} rounds, and you see the ”Results” page, please wait for the next instructions from the instructor.</p>
        <p>Please, press ‘Next’ and continue with the Experiment.</p>
        <button id="backBtn" type="button" class="otree-btn-next btn btn-primary backBtnPlacement">Back</button>
        <button class="otree-btn-next btn btn-primary nextBtnPlacement">Next</button>
    </div>

{% endblock %}

{% block scripts %}

    <!-- define a script -->
    <script>
        $('document').ready(function(){
            $('#nextBtn').click(function () {
                $('#firstInfo').hide('fast');
                $('#secondInfo').show('fast');
            })

            $('#backBtn').click(function () {
                $('#firstInfo').show('fast');
                $('#secondInfo').hide('fast');
            })
        });
    </script>



{% endblock %}