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

{% block app_styles %}

    <link href="{% static "resource_management/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 company’s four business units in a way that would ensure that the company’s growth continues and its place in the market is stable. 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/hierarchy.jpg" %}" width="400">
            <p class="imgText">Figur 1: 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 each business unit, that 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 business unit in each round in the column indicated by ”RA” (Resources Allocated) and the outcome (performance of the business units in each round) of your allocation decisions in the coloumn indicated by ”P” (Payment) (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/demo_view.jpg" %}" width="700">
        </div>
        <p>You can choose how many resources you are willing to give to each project 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 the available {{resources}} resources 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”. </p>
        <p>You need to make these allocation decisions in total for {{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 raise your hand and wait for the instructor to come and give you the next instructions.</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 %}

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

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

{% endblock %}