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

{% block scripts %}

<script src="{% static 'js/Instruction1.js' %}"></script>

{% endblock %}


{% block styles %}

<link href="{% static 'css/Task_Instructions.css' %}" rel="stylesheet">

{% endblock %}

{% block content %}

<div class="tab">
    <h2 style="text-align: center">Plain Language Statement</h2>
    <hr>
    <p>Please read the Plain Language Statement (PLS) below.  </p>
    <p>There is also a hard copy of the PLS on your desk. You may keep it if you wish. </p>
    <p>When you are finished, please click "Next" to proceed.</p>
    <br>
    <iframe
            src="{% static "220331-PLS-unimelb-Lin.pdf" %}" width="100%" height="500px">
    </iframe>
    <br><br><br>
    <button type="button" class="btn btn-primary btn-tab" data-offset="1" style="float: right">Next</button>
</div>

<div class="tab">
    <h2 style="text-align: center">Consent Form</h2>
    <hr>
    <p>
    <b>Responsible Researcher</b>: Prof Nisvan Erkal
    <br><b>Co Researcher</b>: Dr Boon Han Koh
    <br> <b>Student Researcher</b>: Mr Lingguo Xu
    </p>
    <p>
        1. I consent to participate in this project, the details of which have been explained to me, and I have been provided with a written plain language statement to keep.
    </p>
    <p>
        2. I understand that the purpose of this research is to investigate individual decision making under experimental conditions.
    </p>
    <p>
        3. I understand that my participation in this project is for research purposes only.
    </p>
    <p>
        4. I acknowledge that the possible effects of participating in this research project have been explained to my satisfaction.
    </p>
    <p>
        5. I understand that I will be required to make some decisions throughout the experiment. I will be given a set of instructions explaining the experiment and what I have to do in detail. The experiment is simple and requires no prior knowledge of economics.
    </p>
    <p>
        6. I understand that my participation is voluntary and that I am free to withdraw from this project anytime without explanation or prejudice and to withdraw any unprocessed data that I have provided.
    </p>
    <p>
        7. I understand that I will be asked to provide PayID detail so I can receive payments for participating in this experiment.
    </p>
    <p>
        8. I understand that the data from this research will be stored at the University of Melbourne indefinitely.
    </p>
    <p>
        9. I have been informed that the confidentiality of the information I provide will be safeguarded subject to any legal requirements; my data will be password protected and accessible only by the named researchers.
    </p>
    <p>
        10. I understand that after I fill out this consent form, it will be retained by the researcher.
    </p>
    <p>
        <b>
            I agree to take part in the research project mentioned above.
            I have read the Plain Language Statement. By selecting "I agree",
            I declare myself fully informed and I agree to participate on a purely voluntary basis.
            I also attest to being at least 18 years old.
        </b>
    </p>
    {% formfields %}
    <br>
    <p>
        If you wish to withdraw from the experiment, please contact the Experimenter now.
    </p>
    <br><br>
    <div>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1" style="float: left;">Previous</button>
        <button class="btn btn-primary" style="float: right;">Next</button>
    </div>
    <br><br>
</div>
<script>
    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{% endblock %}