{% 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 "MiningGame_Wilkening_PLS_finalversion.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>
    <br><br>
</div>

<div class="tab">
    <h2 style="text-align: center">Consent Form</h2>
    <hr>
    <p>
    <b>Responsible Researcher</b>: Prof Tom Wilkening
    <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 the way people make decisions.
    </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. In this project I will be required to participate in an economic experiment. This will involve reading instructions, completing a quiz to test that I understand the instructions, playing a decision-making game, and completing a brief demographic questionnaire.
    </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 the research team will endeavour to maintain the de-identified data from this project for perpetuity and may reuse the data for closely related projects. I understand that the de-identified data will be stored for at least 5 years after any publication.
    </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 %}