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

{% block title %}
Welcome to the experiment
{% endblock %}

{% block content %}

<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div>
            <p>
                <strong>
                    In this experiment, you can earn a significant bonus payment.
                </strong>
                This bonus is paid on top of the completion fee that you receive from Prolific and will typically
                exceed it.
            </p>
            <p>
                <strong>
                    Your bonus payment depends on your decisions in the experiment as well as on chance.
                </strong>
                It is thus important that you understand the decisions by reading the following explanations carefully.
                After explaining your decisions in detail, you will have to answer comprehension questions. Then, the
                experiment will start.
            </p>
            <p>
                <strong>
                    Please enter your Prolific ID.
                </strong>
                This allows us to transfer your bonus payment to your account.
            </p>

            {% formfield player.prolID %}

            <p>
                <strong>
                    To participate in the experiment, you must agree with our participation rules and privacy policy.
                </strong>
                The data will be stored and analyzed in full compliance with the highest standards of the European Union
                data protection laws (GDPR).
            </p>

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary mt-2" onclick="t_modal()">
                Show participation rules and privacy policy
            </button>
            <script>
                function t_modal() {
                    $("#submitPopUp").modal("toggle")
                }
            </script>

            <!-- Modal -->
            <div class="modal fade bd-example-modal-lg" id="submitPopUp" tabindex="-1" role="dialog"
                aria-labelledby="submitPopUpLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="submitPopUpLabel">Participation rules and privacy policy </h5>
                            <button type="button" class="close" onclick="t_modal()" data-dismiss="modal"
                                aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <p>
                                        Thank you for participating in this experiment, which is part of a scientific
                                        study at Frankfurt School of Finance & Management and ESCP Business
                                        School. The responsible researchers are
                                    </p>
                                </div>
                                <div class="row">
                                    <div class="col-6 pl-2">
                                        <p>
                                            Prof. Dr. Sebastian Ebert </br>
                                            Frankfurt School of Finance & Management </br>
                                            Department of Economics </br>
                                            Adickesallee 32-34, 60322 Frankfurt am Main, Germany </br>
                                            s.ebert@fs.de </br>
                                            +49 69 154008 770 </br>
                                        <p>

                                        </p>
                                    </div>
                                    <div class="col-6 pr-2">
                                        <p>
                                            Prof. Dr. Paul Karehnke </br>
                                            ESCP Business School </br>
                                            Finance Department </br>
                                            79 Avenue de la République, 75011 Paris, France </br>
                                            pkarehnke@escp.eu </br>
                                            +33 1 4923 2136 </br>
                                        </p>
                                    </div>
                                </div>
                                <div class="row">
                                    <p>
                                        The purpose of the experiment is to understand preferences regarding risks over
                                        money. The study will take about 45 minutes to complete.
                                    </p>
                                    <p>
                                        Your participation in this research is confidential. The experiment does not ask
                                        for any information that would identify who the responses belong to. In the
                                        event of any publication or presentation resulting from the research, no
                                        personally identifiable information will be shared because your name is in no
                                        way linked to your responses. Your confidentiality will be kept to the degree
                                        permitted by the technology used. No guarantees can be made regarding the
                                        interception of data sent via the internet by any third parties. Please contact
                                        the following body if you have any concerns about this matter or other
                                        complaints: Hessischer Beauftragter für Datenschutz und Informationsfreiheit:
                                        https://datenschutz.hessen.de
                                    </p>
                                    <p>
                                        Your decision to participate in this research is voluntary. You can choose to
                                        withdraw from the experiment at any time. Refusal of consent or leaving the
                                        experiment before it ends remains without any consequences for you. As usual,
                                        however, if you do not complete the Prolific study, you do not receive any
                                        payment. Once you have completed the experiment, your data will be saved
                                        anonymously. You cannot
                                        request to have your anonymized data deleted, corrected, have its processing
                                        limited, or refuse to have it transferred to third parties. The dataset
                                        involving
                                        your anonymized data may be made publicly available. You must be 18 years of age
                                        or older to take part in this experiment.
                                    </p>
                                    <p>
                                        By accepting the participation rules and privacy policy, you are implying that
                                        you have read the
                                        information above, understand it, and consent to take part in the research. If
                                        you do not want to participate and wish to withdraw from this study, please
                                        close the window and select option "No."
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="t_modal()"
                                data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            {% formfield player.consent_privacy %}
            <div id="noConsentInput" class="d-none" >
                <p  class="option-error alert alert-danger">
                    Please state whether you agree to our participation rules and privacy policy using "Yes" or "No". 
                </p>
            </div>
            
            <p>
                <strong>
                    Everything that we – the experimenters – tell you in the experiment is true.
                </strong>
                Your bonus will be computed fairly and exactly as described. 
                You can <u>verify</u> this by downloading the “Verification.pdf" below now and viewing it using the password that 
                you receive after the experiment. Details are explained in the file.
            </p>

            {{ formfield_errors "verification_download_bool" }}
            <input type="hidden" id="verification_download_bool" name="verification_download_bool"
                value="False"></input>
            <a href="{{ static download_link }}" id="verification_download" onclick="check_verification_download()"
                class="btn btn-primary mb-1 mr-1 disabled" download target="_blank">Download
                Verification.pdf</a>
        </div>
        <p>
        <div id="next_btn_info" style="display:block;" class="alert alert-info" role="alert">
            <strong>
                Clicking the “Proceed” button below will take you to the next page.
            </strong>
            If it does not work yet, please wait. This delay is intentional and makes sure that all participants spend
            enough time with the explanations. Later pages also have such built-in delays. There is no upper time limit
            – please take as much time on each page as you need.
        </div>
        <button type="button" onclick="toggle_modals()" id="next_page_btn" class="btn btn-primary"
            disabled>Proceed</button>
        </p>
    </div>
</div>

<!-- Modal -->

<div class="modal fade" id="no_privace_pop_up" tabindex="-1" role="dialog" aria-labelledby="no_privace_pop_upLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="no_privace_pop_upLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="toggle_privacy_modal()" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2" id="add_text_blog">
                    You have not consented to our participation rules and privacy policy.
                    Consenting to it is necessary for participating in this study.
                    Are you sure you want to withdraw from this study?
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <div id="cond_modal_buttons_true">
                    <button type="button" class="btn btn-secondary" onclick="toggle_privacy_modal()"
                        data-dismiss="modal">
                        Go back
                    </button>

                    <button class="btn btn-primary" id="next_page_modal_btn" onclick="fake_prol_id()">
                        Yes, I want to withdraw from this study
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Verification.pdf -->

<div class="modal fade" id="no_verification_pop_up" tabindex="-1" role="dialog" aria-labelledby="no_verification_pop_upLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="no_privace_pop_upLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="toggle_verification_modal()" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2" id="add_text_blog">
                    You have not downloaded the Verification.pdf. 
                    You do not have to download it to participate in the experiment and receive your payment. 
                    Downloading it, however, will allow you to verify that your bonus was computed fairly and exactly as described.
                </div>
            </div>
            
            <div class="modal-footer justify-content-center">
                <div id="cond_modal_buttons_true">

                    <button type="button" class="btn btn-secondary" onclick="toggle_verification_modal()" data-dismiss="modal">
                        Go back and download
                    </button>

                    <button class="btn btn-primary" id="noVerification_btn">
                        Continue
                    </button>

                </div>
            </div>
        </div>
    </div>
</div>


<script>
    // Enable download of verification.pdf after radio button for privacy clicked
    document.getElementById("id_consent_privacy-0").setAttribute("onclick","toggle_view();");
    document.getElementById("id_consent_privacy-1").setAttribute("onclick","toggle_view();");

    function toggle_view() {
        document.getElementById('verification_download').classList.remove('disabled');
        document.getElementById("noConsentInput").classList.add("d-none")
    }

    function fake_prol_id() {
        // Use a fake ProlificId if not supplied - Avoids error message after modal
        if (!document.getElementById("id_prolID").value) {
            document.getElementById("id_prolID").value = "NoPrivacyConsent"
        }
    }

    function toggle_modals() {
        let radios = document.getElementsByName("consent_privacy")
        let privacy_consent = "None"
        let verification_downloaded = document.getElementById("verification_download_bool").value  
        
        for (var i = 0, length = radios.length; i < length; i++) {
            if (radios[i].checked) {
                // do whatever you want with the checked radio
                privacy_consent = radios[i].value
                // only one radio can be logically checked, don't check the rest
                break
            }
        }

        if ((!document.getElementById("id_prolID").value) && privacy_consent != "False") {
            // No Prolific-ID given
            document.getElementById("id_prolID").reportValidity()
            return; // Stop function
        }
        
        if (privacy_consent == "None") {
            document.getElementById("noConsentInput").classList.remove("d-none")
        }
        else if (privacy_consent == "False") {
            toggle_privacy_modal()
            //$("#no_privace_pop_up").modal("toggle")
        }
        else if (verification_downloaded == "False") {
            toggle_verification_modal()
        }
        else { 
            document.getElementById("form").submit()
        }
    }


    function toggle_privacy_modal() {
        $("#no_privace_pop_up").modal("toggle")       
    }

    function toggle_verification_modal() {
        $("#no_verification_pop_up").modal("toggle")       
    }


    function check_verification_download() {
        document.getElementById("verification_download_bool").value = "True"
    }

    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        // 0 * 1000
        min_time_on_page * 1000
    );
</script>

{% endblock %}