{% extends "global/Page.html" %}
{% load otree %}
{% block title %}Willkommen!{% endblock %}

{% block content %}

<style>
    body {
    font: normal 1.25em Candara, sans-serif;
    }

    .div1 {
        width: 1050px;
        padding: 20px;
        background-color: aliceblue;
        background-color: #eefbf4;
    }

    .otree-body {
        max-width:1100px
    }

    .div2 {
        width: 1050px;
        padding: 20px;
        height: 25px;
    }

    .otree-btn-next {

        float: right;
        display: none;
    }

    h1 {
        font-size: 150%;
        margin-bottom: 20px
    }

    .tab { margin-left: 50px;



</style>



<p> Willkommen zur heutigen Studie. Die heutige Studie besteht aus 4 verschiedenen Aufgabenteilen, deren Bearbeitung insgesamt nicht mehr als <b>30 Minuten</b> in Anspruch nehmen sollte. </p>

<p> Für die vollständige Bearbeitung der heutigen Aufgaben erhalten Sie eine <b>Grundvergütung von insgesamt 3,00 Euro</b>. &nbsp Abhängig von Ihren Aktionen im Experiment sowie den Aktionen anderer Teilnehmender erhalten Sie zudem noch eine <b>variable Auszahlung</b>. Außerdem können Ihre Entscheidungen die <b>Auszahlungen von Teilnehmenden einer zukünftigen Studie</b> beeinflussen. </p>

<p> Bevor die Studie startet, bitten wir Sie noch um die Angabe einiger Daten, die wir für die Überweisung Ihrer Auszahlung benötigen. Wir werden diese Daten nicht zusammen mit Ihren späteren Antworten in dieser Studie auswerten. </p>

<div class="div1">
    <h1> Zahlungsdaten </h1>
    {% formfield player.name label="Vollständiger Name" %}
    {% formfield player.email label="Email Adresse" %}
    <p> (Bitte geben Sie die Email-Adresse an, mit der Sie in der <b>Teilnahmedatenbank des BonnEconLab</b> registriert sind.) </p>
    {% formfield player.iban label="IBAN" %}
    {% formfield player.bic label="BIC / SWIFT-Code" %}

</div>
<p></p>
<p> Ich bestätige die Korrektheit der obigen Angaben. <input name="data_validation" type="checkbox" onclick="check(this)" /></p>
 <p> </p>

 <script>

     $(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});


     function check(obj){
    if (obj.checked)
    {
        $('.otree-btn-next').show(0);
    }
    else
    {
        $('.otree-btn-next').hide(0);
    }
}




</script>

{% next_button %}

{% endblock %}
</div>