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

{% block styles %}

<style>

ul li.extra {
    margin-bottom: 8px;
    margin-left: -8px;
}

.modal {
    background-color: white;
    display: none;
    height: 100%;
    width: 100%;
}

.modal-content {
    border: 1px solid black;
    border-radius: 5px;
    margin: auto;
    padding: 25px;
    top: 100px;
    width: 80%;
}

.close {
    color: silver;
    font-size: 25px;
    font-weight: bold;
}

.close:hover {
    color: black;
    cursor: pointer;
}

</style>

{% endblock %}

{% block title %}

Informed Consent

{% endblock %}

{% block content %}

<ul>

<li class="extra">
I hereby give permission to use my data for scientific purposes.
</li>

<li class="extra">
I have had enough time to decide whether I want to participate in the experiment.
</li>

<li class="extra">
I know that participation is voluntary, and I know that I can decide to withdraw from the experiment at any time.
I do not have to provide any justification for such a decision to withdraw.
If I withdraw, I forfeit any monetary compensation.
</li>

<li class="extra">
I have had the opportunity to ask questions by contacting Eveline Vandewal, one of the researchers involved in the experiment, at the following e-mail address: <a href="mailto:e.vandewal@maastrichtuniversity.nl"> e.vandewal@maastrichtuniversity.nl</a>.
My questions have been answered sufficiently.
</li>

<li class="extra">
I know that my data will be saved anonymously and will consequently only be made public anonymously.
</li>

</ul>

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Important:</u> Press <span onclick="openModal()" style="color: silver; cursor: pointer"> here </span> to read more about how we deal with your personal data.
</p>

<p align="justify">
<i> This experiment has been reviewed and approved by the Ethical Review Committee Inner City faculties (ERCIC) of Maastricht University, the Netherlands. </i>
</p>

<hr color="silver">

{% formfield player.consent label="I confirm to have read and understood the points stated above and provide my consent to participate in the experiment." %}

<br />

<button class="btn btn-primary btn-large" onclick="saveData()" style="float: right"> Next </button>

<input id="start_time" name="start_time" type="hidden" value=""/>

<!-- Modal -->

<div class="modal" id="modal">

<div class="modal-content">

<span class="close" onclick="closeModal()"> &times; </span>

<br />

<p align="justify">
For this research project, personal data about you will be used and stored by Maastricht University for payment purposes.
This concerns the following data: name, address, date of birth, International Bank Account Number (IBAN), and e-mail address.
To protect your privacy, your personal data will be temporarily and confidentially stored with access only for the researcher who carries out the payments.
Thereafter, the research data will be anonymized, so they cannot be traced back to you personally in any way.
To invoke your right of access or your right of erasure of your personal data, you can contact e.vandewal@maastrichtuniversity.nl.
For questions or complaints about the privacy legislation of this research project, you can contact privacy@maastrichtuniversity.nl.
</p>

</div>

</div>

<!-- -->

{% endblock %}

{% block scripts %}

<script>

var startTime = new Date().getTime();

function saveData() {
    document.getElementById("start_time").value = startTime;
}

function openModal() {
    modal.style.display = "block";
}

function closeModal() {
    modal.style.display = "none";
}

</script>

{% endblock %}