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

{% block title %}
    <div class=" alert alert-warning" align="center">Abschließender Fragebogen</div>
{% endblock %}

{% block content %}

<div class="card card2 bg-light m-3">
    <div class="card-body">
<br>
        <div style="margin-bottom: 6px; padding-left: 0px"><b>Nach welchen Kriterien haben Sie Ihre Transfervorschläge im <br>Allgemeinen bestimmt und was haben Sie sich von Ihren Entscheidungen erhofft? </b><br> </div>
        <p style="padding-left: 0px;"><textarea style="border-color:#4c4b4b45" id="est1_transfer" rows="2" cols="80" placeholder="Hier tippen." name="est1_transfer" required></textarea>
        </p>
<br>
        <div style="margin-bottom: 6px; padding-left: 0px"><b>Verglichen mit dem durchschnittlichen Schätzer in diesem Experiment, glauben Sie die Anzahl der <br>gezeigten
            Objekte über die {{Constants.num_rounds}} Runden schlechter, in etwa gleich gut, oder besser geschätzt zu haben?<br>
        (falls Sie mit Ihrer Einschätzung richtig liegen, erhalten Sie einen Bonus von 1 Taler)</b></div>
<div class="container4" style="margin-left:25%; margin-right:25%">
<l class="likert">
    <liL> Schlechter</liL>
    <li> =</li>
    <li>1<br><input type="radio" name="est2_confidence_guess" value="1" required /></li>
    <li>2<br><input type="radio" name="est2_confidence_guess" value="2" required /></li>
    <li>3<br><input type="radio" name="est2_confidence_guess" value="3" required /></li>
    <li> =</li>
    <liR> Besser</liR>
</l>
    </div>
<br>

        </p>
<br><br><br>
 <div style="margin-bottom: 6px; padding-left: 0px"><b>Ihnen wurde in den {{Constants.num_rounds}} Runden {{n_prizes_received}}-mal das Preisgeld zuerkannt. Nach Ihrer Wahrnehmung, wie<br> oft hatten Sie das
     Preisgeld objektiv verdient (bei einer erlaubten Abweichung von maximal 5)?<br>
 (falls Sie mit Ihrer Einschätzung richtig liegen, erhalten Sie einen Bonus von 2 Taler)</b></div>
        {% formfield 'est3_deserved' %}
        </p>
<br>
        <div style="margin-bottom: 6px; padding-left: 0px"><b>Was hat Sie dazu veranlasst, eine Überprüfung einzuleiten <br>bzw. zu unterlassen? Welche Gedanken gingen in Ihnen vor?</b> </div>
        <p style="padding-left: 0px;"><textarea style="border-color:#4c4b4b45" id="est4_review" rows="2" cols="80" placeholder="Hier tippen." name="est4_review" required></textarea>
        </p>
<br>
        <div style="margin-bottom: 6px; padding-left: 0px"><b>Wie alt sind Sie?</b> </div>
        {% formfield 'age' %}
<br>
        <div style="margin-bottom: 6px; padding-left: 0px"><b>Welchem Geschlecht fühlen Sie sich zugehörig?</b> </div>
        {% formfield 'gender' %}
<br>

<div style="margin-bottom: 6px; padding-left: 0px"><b>Sind bei Ihnen technische Probleme aufgetreten oder haben Sie sonstige Anmerkungen?</b><br> </div>
        <p style="padding-left: 0px;"><textarea style="border-color:#4c4b4b45" id="feedback" rows="4" cols="80" placeholder="Hier tippen." name="feedback" ></textarea>
        </p>

<br><br>

 <p align="center"> <button type="submit" id="iii" class="btn btn-primary btn-large">Abschicken</button></p>
<br>




 </div>
</div>








<style>

input[type=radio]:checked {
  display: inline-block;
  background-color: #3781FA;


}

.error {
margin-bottom: 0px;
color:red;
}

textarea:focus {
    outline: none !important;
    border-color: #719ECE;
    border-radius: 5px;
    border-width: 2px;

}

textarea.error:focus {
    outline: none !important;
    border-radius: 5px;
    border-width: 2px;
    border: 2px solid red;
}

textarea {

vertical-align: middle;
}


mrgn {
    margin-left: 0.5cm;
    margin-bottom: 0.3cm;
}

span {
    border: 3px solid #000;
    white-space:nowrap;
    height: 30px;
    padding: 1em;
}

div.container4 {


    width: 72em;
    position: relative }


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;

}



.likert li {

    float: left;
    width: 47px;
    list-style-type: none;

}

.likert liL {

float: left;
padding-left:0px;

    width: 100px;
    list-style-type: none;

}

.likert liR {

float: left;
    width: 100px;
    list-style-type: none;

}



.form-control  {
    //color: #3e93e8;
    margin-left: auto;
    margin-right: auto;
    min-width: 30px;
    //border: #ced4da;

}

.input-group {

    margin-left: auto;
    margin-right: auto;
    //width: 200px
    //margin-left: 25px;
}


  .otree-form  {
       text-align: center;
  }

  .otree-timer {
    color: #3e3a3a;
    background-color: #c3c3c300;
    // background-color: #c3c3c39e;
    border-color: #c3c3c300;
    // border-color: #c3c3c39e;
    text-align: center;
    //position: absolute;
    //bottom: 100%;

  }



 .otree-timer {
 display: none;
%order: -1;
}

.debug-info {
//  display: none;
order: 3;
}



</style>


{% endblock %}