{% 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 class="row">
            <div class="col">
                <p>
                    <strong>
                        In this experiment, you can earn a bonus
                    </strong>
                    on top of the completion fee.
                    Your bonus depends on your 
                    choices            
                    as well as on chance.
                    It is thus important that you read the explanations carefully. 
                </p>
        
                <p>
                    There will be attention checks.
                    You will be excluded from the experiment and receive no payment
                    if you fail 
                    them.
                </p> 
            
                <p>
                    Some pages have built-in delays
                    to ensure that all participants spend
                    enough time reading the explanations. There is no upper time 
                    limit—you can take as much time as you need. Please be 
                    aware of Prolific's maximum time allowed to 
                    complete the experiment.
                </p>
                
                
                {{ formfield 'prolID' }}
                
                {{ if touristVersion }}
                <p>
                    <span style="color:red;">Note:</span>
                    In this tourist version, you can enter anything as your Prolific ID. 
                </p>
                {{ endif }}
                
                <p>
                    <strong>
                        To participate in this experiment, you must agree with our participation rules and privacy policy.
                    </strong>
                </p>
        
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" onclick="trigger_modal()">
                    Show participation rules and privacy policy
                </button>
                    
                <br></br>
        
                I have read the participation rules and privacy policy and consent with them:
                
                {{ form.consent_privacy }}
                {{ formfield_errors 'consent_privacy' }}
            
                   
            </div>
            
        </div>

        <div id="attentionConsentSec" class="collapse">
            <div class="col">
                <hr></hr>
                The experiment will take about 20 minutes, of which reading the explanations will 
                take about 10 minutes. Please confirm that you 
                are willing to focus exclusively on the experiment until you are finished:
                
                {{ form.consent_attention }}
            </div>
        </div>
        
        <div id="screenConsentSec" class="collapse">
            <div class="col">
                <hr></hr>
                Finally, please confirm that your browser window is  
                wider than it is high. This ensures that the 
                upcoming content is displayed
                correctly:
                
                {{ form.consent_screen }}
            
                </br>
            </div>
        </div>
        
        <div id="verificationDwnld" class="row panel-collapse collapse">
            <div class="col justify-content-center alert alert-info">
                <div class="row">
                    <div class="col">
                        <strong>
                            You can verify that 
                            your bonus is computed fairly and exactly as described.
                        </strong>
                        
                        Verification is possible 
                        after the experiment if you
                        download <i>Verification.pdf</i> below. 
                        
                        You receive the password to it
                        after the experiment.
                    </div>
                </div>

                <div class="row d-none">
                    <div class="col">
                        <!--Hidden download button clicked via function -->            
                        <a id="verificationDwnldLink" href="{% static download_link %}" 
                            class="btn btn-primary mt-2 d-none"
                            target="_blank"
                            download>
                            Continue <strong>with</strong> download
                        </a>
                    </div>
                </div>

                <div class="row">
                    <!-- Proceeed buttons-->
                    {{if player.downloadLeft}}
                        <div class="col-6 d-flex justify-content-end">
                            <button class="btn btn-primary mt-2" onclick="download()">
                                Continue <strong>with</strong> download
                            </button>
                        </div>   

                        <div class="col-6 d-flex justify-content-start">
                            <button type="button" class="btn btn-primary mt-2" onclick="showVerificationModule();"
                            data-toggle="modal" data-target="#verificationPopUp">
                                Continue <strong>without</strong> download
                            </button>
                        </div>
                        
                    {{else}}
                        <div class="col-6 d-flex justify-content-end">
                            <button type="button" class="btn btn-primary mt-2" onclick="showVerificationModule();"
                            data-toggle="modal" data-target="#verificationPopUp">
                                Continue <strong>without</strong> download
                            </button>
                        </div>
                        
                        <div class="col-6 d-flex justify-content-start">
                            <button class="btn btn-primary mt-2" onclick="download()">
                                Continue <strong>with</strong> download
                            </button>
                        </div>   
                    {{ endif }}
                </div>

            </div>
            
            {{ if touristVersion}}
            <div class="col-12">
                <span style="color:red;">Note:</span>
                In this tourist version, the password for the Verification.pdf
                is '{{showPW}}' (no quotes).
            </div>
            {{ endif }}

        </div>

        <div id="exitSec" class="row panel-collapse collapse">
            <div class="col">
                <button type="button" class="btn btn-primary mt-2" onclick="showStopModule();"
                    data-toggle="modal" data-target="#submitPopUp" id="test_privacy">
                    Withdraw from this experiment
                </button> 
                </br>
            </div>
        </div>

    </div>
</div>
    
<div class="row d-none">
    <div class="col">
        <input type="hidden" id="downloadVerification" name="downloadVerification"
            value="False"></input>
        {{ formfield_errors 'screenWidth' }}
        <input type="hidden" id="screenWidth" name="screenWidth"
            value="False"></input>
        {{ formfield_errors 'screenHeight' }}
        <input type="hidden" id="screenHeight" name="screenHeight"
            value="False"></input>
    </div>
</div>

{{ formfield_errors 'consent_attention' }} 
 
{% if testing %}
    <button id="skipBtn" class="btn btn-secondary px-3" onclick="skipPage()">
    Skip for testing</button>
{% endif %}
    
        
<script>
    // Save screen dimension
    document.getElementById("screenWidth").value = screen.width
    document.getElementById("screenHeight").value = screen.height

    // Add Functions to Radio Button for Privacy Consent
    document.getElementById("id_consent_privacy-0").setAttribute("onclick","update_privacy_policy('True');");
    document.getElementById("id_consent_privacy-1").setAttribute("onclick","update_privacy_policy('False');");
    
    document.getElementById("id_consent_attention-0").setAttribute("onclick","attnConsent('True');");
    document.getElementById("id_consent_attention-1").setAttribute("onclick","attnConsent('False');");
    
    document.getElementById("id_consent_screen-0").setAttribute("onclick","screenConsent('True');");
    document.getElementById("id_consent_screen-1").setAttribute("onclick","screenConsent('False');");

    function update_privacy_policy(input){
        
        if (input == "True") {
            $('#attentionConsentSec').collapse('show')
            
            showVerificationDownload()
        } else {
            $('#attentionConsentSec').collapse('hide')
            $('#verificationDwnld').collapse('hide')
            $('#screenConsentSec').collapse('hide')
            $('#exitSec').collapse('show')
            
            // Clear attention consent radio buttons
            document.getElementById("id_consent_attention-0").checked = false;
            document.getElementById("id_consent_attention-1").checked = false;
            // Clear screen consent ratio buttons
            document.getElementById("id_consent_screen-0").checked = false;
            document.getElementById("id_consent_screen-1").checked = false;
        }

    }
    
    function attnConsent(input){
        if (input == "True") {
            $('#screenConsentSec').collapse('show')

            showVerificationDownload()
        } else {
            $('#screenConsentSec').collapse('hide')
            $('#verificationDwnld').collapse('hide')
            $('#exitSec').collapse('show')
        
            // Clear screen consent ratio buttons
            document.getElementById("id_consent_screen-0").checked = false;
            document.getElementById("id_consent_screen-1").checked = false;
        }
    }
   
    function screenConsent(input){
        if (input == "True") {
            showVerificationDownload()
        } else {
            $('#verificationDwnld').collapse('hide')
            $('#exitSec').collapse('show')
        }
    }

    function showVerificationDownload() {
        // Test if all consents are true
        const privacy = $("input[name='consent_privacy']:checked").val()
        const attention = $("input[name='consent_attention']:checked").val()
        const screen = $("input[name='consent_screen']:checked").val()

        if (privacy && attention && screen) {
            $('#verificationDwnld').collapse('show')
            $('#exitSec').collapse('hide')
        } else {
            $('#verificationDwnld').collapse('hide')
            $('#exitSec').collapse('hide')
        }
    }

    function trigger_modal() {
        $("#privacyModal").modal("show")
    }

    function close_modal() {
        $("#privacyModal").modal("hide")
    }

    function showStopModule() {
        const privacy = $("input[name='consent_privacy']:checked").val()
        const attention = $("input[name='consent_attention']:checked").val()
        const screen = $("input[name='consent_screen']:checked").val()

        if (privacy === "False") {
            // Use privacy-text in modal
            document.getElementById("privacyText").classList.remove("d-none")
            document.getElementById("attentionText").classList.add("d-none")
            document.getElementById("screenText").classList.add("d-none")
            document.getElementById("id_consent_attention").value = "False" // Must be added in case it has not been clicked
            document.getElementById("id_consent_screen").value = "False"
        }
        
        if (attention === "False") {
            // Use attention-text in modal
            document.getElementById("attentionText").classList.remove("d-none")
            document.getElementById("privacyText").classList.add("d-none")
            document.getElementById("screenText").classList.add("d-none")
        }
        
        if (screen === "False") {
            // Use attention-text in modal
            document.getElementById("attentionText").classList.add("d-none")
            document.getElementById("privacyText").classList.add("d-none")
            document.getElementById("screenText").classList.remove("d-none")
        }

        $("#submitPopUp").modal("toggle")

        document.getElementById("next_page_modal_btn").onclick= function() {
            // 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 download() {

        if (!document.getElementById("id_prolID").value) {
            // No Prolific-ID given
            document.getElementById("id_prolID").reportValidity()
        }
        else {
            document.getElementById("downloadVerification").value = "True"
            
            let elem = document.getElementById("verificationDwnldLink")
            elem.click();
        }
    }

    function showVerificationModule() {  
        if (!document.getElementById("id_prolID").value) {
        // No Prolific-ID given
        document.getElementById("id_prolID").reportValidity()
        }
        else {
            $("#verificationPopUp").modal("toggle")
        }
    }

    function skipPage() {
        document.getElementById("id_prolID").value = "skipped"
        document.getElementById("id_consent_privacy-0").checked = true;
        document.getElementById("id_consent_attention-0").checked = true;
        document.getElementById("id_consent_screen-0").checked = true;
        document.getElementById("id_consent_privacy").value = "True"
        document.getElementById("id_consent_attention").value = "True"
        document.getElementById("id_consent_screen").value = "True"

        document.getElementById("verification_download_bool").value = "True"
        let elem = document.getElementById("verificationDwnldLink")
        elem.click();
    }

</script>


<!-- Modal for Submit -->
<div class="modal fade" id="submitPopUp" tabindex="-1" role="dialog" aria-labelledby="submitPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="showStopModule()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2 d-none" id="privacyText">
                    You have not consented to our participation rules and privacy policy. 
                    Consenting to it is necessary for participating in this experiment. 
                    Are you sure you want to withdraw from this experiment?
                </div>
                <div class="p-2 m-2 d-none" id="attentionText">
                    You have not consented to pay full attention to the experiment until you complete
                    the experiment. 
                    Consenting to it is necessary for participating in this experiment. 
                    Are you sure you want to withdraw from this experiment?
                </div>
                <div class="p-2 m-2 d-none" id="screenText">
                    You have not confirmed that your browser window is wider than high, i.e., horizontal. 
                    Consenting to it is necessary for participating in this experiment, as 
                    the content will not be viewed correctly otherwise. 
                    Are you sure you want to withdraw from this experiment?
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <div id="cond_modal_buttons_true">
                    <button type="button" class="btn btn-secondary" onclick="showStopModule()" data-dismiss="modal">
                        Go back
                    </button>

                    <button class="btn btn-primary" id="next_page_modal_btn"> 
                        Yes, I want to withdraw from this experiment
                    </button>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Verification -->
<div class="modal fade" id="verificationPopUp" tabindex="-1" role="dialog" aria-labelledby="verificationPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel">Are you sure? </h5>
                <button type="button" class="close" onclick="showVerificationModule()" 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 to receive your payment. 
                    Downloading it, however, will allow you to verify that your bonus is 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="showVerificationModule()" data-dismiss="modal">
                        Go back and download
                    </button>

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

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


<!-- Modal with privacy information -->
<div class="modal fade bd-example-modal-lg" id="privacyModal" tabindex="-1" role="dialog" 
    aria-labelledby="privacyModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="privacyModalTitle">Participation rules and privacy policy </h5>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-12 px-0"> 
                            <p>
                                Thank you for participating in this experiment, which is part of a scientific
                                study
                                at the Frankfurt School of Finance & Management.
                                The responsible researchers are
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 px-0">
                            <p>
                                Prof. Dr. Sebastian Ebert </br>
                                University of Heidelberg </br>
                                Chair of Economic Theory I </br>
                                Bergheimer Str. 58, 69115 Heidelberg, Germany </br>
                                sebastian.ebert@awi.uni-heidelberg.de </br>
                            <p>

                            </p>
                        </div>
                        <div class="col-6 px-0">
                            <p>
                                Maximilian Voigt </br>
                                Frankfurt School of Finance & Management </br>
                                Department of Economics </br>
                                Adickesallee 32-34, 60322 Frankfurt am Main, Germany </br>
                                m.voigt@fs.de </br>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 px-0"> 
                        <p>
                            The purpose of the experiment is to understand preferences regarding risks over
                            money. The experiment will take about 20 minutes to complete. The data will be stored 
                            and analyzed in full compliance with the highest standards of the European Union 
                            data protection laws (GDPR).
                        </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 this 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 experiment, 
                            please close this window and select option "No".
                        </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="close_modal()">Close</button>
            </div>
        </div>
    </div>
</div>



{% endblock %}