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

{% block title %}

{% endblock %}

{% block styles %}
    <style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Dropdown Button */
.dropbtn {
  background-color: #FFFFFF;
  color: black;
  padding: 0px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

.dropdown-content p {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f1f1f1;}
</style>
{% endblock %}

{% block content %}
<div class="card info">
    <strong> General Instructions </strong> <br>
    <p>
        During the study, all amounts will be presented as points. At the end of the study,
        the points you have earned will be converted into GBP as follows:
    </p>
    <p style="text-align:center"> <strong> 10 points = GBP XX </strong> </p>

    <p>
        <strong> Roles in the study </strong> <br>
        In this study, there are two parties involved: a decision maker and a group of receivers. <br><br>

        The receivers will be the following three charities: <br> <br>
        <strong>1. Doctors without Borders</strong> <br>
        Mission: To provide lifesaving medical care to those most in need.
    <div class="dropdown">
        <button class="dropbtn">More about Doctors without Borders </button>
        <div class="dropdown-content">
            <p>
                Doctors without Borders provides assistance to populations in distress, to victims of natural or man-made disasters, and to victims of armed conflict. They do so irrespective of race, religion, creed, or political convictions.
                Doctors without Borders observes neutrality and impartiality in the name of universal medical ethics and the right to humanitarian assistance. It claims full and unhindered freedom in the exercise of its functions.
            </p>
        </div>
    </div>
    <br>
          <div class="dropdown">
            <button class="dropbtn"><p align="left"> <strong>2. UNICEF</strong> </p>
                <p>
                    Mission: UNICEF is mandated by the United Nations General Assembly to advocate for the protection of children's rights, to help meet their basic needs and to expand their opportunities to reach their full potential.
                </p>
            </button>
            <div class="dropdown-content">
                <p>
                    UNICEF mobilizes political will and material resources to help countries, particularly developing countries, ensure a "first call for children" and to build their capacity to form appropriate policies and deliver services for children and their families. <br>
                    UNICEF also responds in emergencies to protect the rights of children. In coordination with United Nations partners and humanitarian agencies, UNICEF makes its unique facilities for rapid response available to its partners to relieve the suffering of children and those who provide their care. <br>
                    UNICEF is non-partisan and its cooperation is free of discrimination. In everything it does, the most disadvantaged children and the countries in greatest need have priority.
                </p>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn"><p align="left"> <strong>3. World Wildlife Fund</strong> </p>
                <p>
                    Mission: To conserve nature and reduce the most pressing threats to the diversity of life on Earth.
                </p>
            </button>
            <div class="dropdown-content">
                <p>
                    WWF works to help local communities conserve the natural resources they depend upon; transform markets and policies toward sustainability; and protect and restore species and their habitats. Our efforts ensure that the value of nature is reflected in decision-making from a local to a global scale. WWF connects cutting-edge conservation science with the collective power of our partners in the field, more than 1 million supporters in the United States and 5 million globally, and our partnerships with communities, companies, and governments.
                </p>
            </div>
        </div>

        Any proceeds collected for the receivers will be split equally among the three charities.
        We will upload a receipt of the donation to our website (http://www.xxxxxxx/) where you can verify the validity of the donation.

    </p>
</div>
<br><br>

<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="Introduction01_time" id="Introduction01_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('Introduction01_time').value=page_time;
};

</script>
{% endblock %}