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

{% block styles %}
    <style>
        .otree-timer {
            display:none;
        }
    </style>
{% endblock %}

{% block title %}
Sozialpsychologie Heidelberg
{% endblock %}

{% block content %}
<div class="outerHeadDiv">

    <!-- Hier muss der Titel für die Seite rein (der dann groß und rot angezeigt wird) -->
    <span class="innerHeadDivText new-title">
        Die Gruppenmitglieder
    </span>

    <div class="innerHeadDivLogo">
        <img src="{% static 'Simpson/unihei_color.jpg' %}" class="logo"/>
    </div>

</div>
<hr>

<p style="text-align:justify;">
    <b>Nun möchten wir Sie bitten ein paar kurze Fragen zu den anderen Gruppenmitgliedern zu beantworten.</b>
    <br>
    <i>Es gibt keine richtigen oder falschen Antworten, es geht lediglich um Ihre persönlichen Einschätzungen.</i>
</p>

<!-- Frage 1 -->
<div class="question">
    Wie empfanden Sie die Stimmung bei der Diskussion?
</div>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>Angespannt</div>
    <div style="margin: 3px"></div>

    {{ form.relationship }}

</div>

<br>

<!-- Frage 2 -->
<div class="question">
    Wie sehr haben Sie sich bei der Aufgabe anstrengt?
</div>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>Gar nicht</div>
    <div style="margin: 3px"></div>

    {{ form.vigilanzSelbst }}

</div>


<br>
<br>


{% if player.id_in_group == 1 %} <!-- Fragen mit VPn 1 als befragter Person -->
<!-- Frage 3 -->
    <hr>
    <div class="question">
        Wie sehr hat sich <b>Person Nr. 2</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP2 }}

    </div>

    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 2</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP2 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP2 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP2 }}

    </div>
    <br>
    <br>
    <hr>

<!-- Frage 4 -->

    <div class="question">
        Wie sehr hat sich <b>Person Nr. 3</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP3 }}

    </div>

    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 3</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP3 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP3 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP3 }}

    </div>
    <br>
    <br>

{% elif player.id_in_group == 2 %} <!-- Fragen mit VPn 2 als befragter Person -->
<!-- Frage 3 -->
    <hr>
    <div class="question">
        Wie sehr hat sich <b>Person Nr. 1</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP1 }}

    </div>
    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 1</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP1 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP1 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP1 }}

    </div>

    <br>
    <br>
    <hr>

<!-- Frage 4 -->

    <div class="question">
        Wie sehr hat sich <b>Person Nr. 3</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP3 }}

    </div>
    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 3</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP3 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP3 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP3 }}

    </div>

<br>
<br>

{% else %} <!-- Fragen mit VPn 3 als befragter Person -->
<!-- Frage 3 -->
    <hr>
    <div class="question">
        Wie sehr hat sich <b>Person Nr. 1</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP1 }}

    </div>
    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 1</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP1 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP1 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP1 }}

    </div>

    <br>
    <br>
    <hr>
<!-- Frage 4 -->
    <div class="question">
        Wie sehr hat sich <b>Person Nr. 2</b> bei der Aufgabe angestrengt?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>Gar nicht</div>
        <div style="margin: 3px"></div>

        {{ form.vigilanzVP2 }}

    </div>
    <br>
    <div class="question">
        Anhand von dem Austausch im Chat, wie würden Sie <b>Person Nr. 2</b> auf den folgenden Skalen beschreiben?
    </div>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>inkompetent</div>
        <div style="margin: 3px"></div>

        {{ form.kompetenzVP2 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unehrlich</div>
        <div style="margin: 3px"></div>

        {{ form.ehrlichkeitVP2 }}

    </div>
    <br>
    <br>
    <div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
        <div>unseriös</div>
        <div style="margin: 3px"></div>

        {{ form.serioesitaetVP2 }}

    </div>

<br>
<br>
{% endif %}


<!-- Einschätzung der Artikel -->

<hr>

<div class="question">
    Wie würden Sie <b>Artikel 1</b> auf den folgenden Skalen beschreiben?
</div>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>inkompetent</div>
    <div style="margin: 3px"></div>

    {{ form.kompetenzArtikel1 }}

</div>
<br>
<br>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>unehrlich</div>
    <div style="margin: 3px"></div>

    {{ form.ehrlichkeitArtikel1 }}

</div>
<br>
<br>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>unseriös</div>
    <div style="margin: 3px"></div>

    {{ form.serioesitaetArtikel1 }}

</div>

<br>
<br>


<div class="question">
    Wie würden Sie <b>Artikel 2</b> auf den folgenden Skalen beschreiben?
</div>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>inkompetent</div>
    <div style="margin: 3px"></div>

    {{ form.kompetenzArtikel2 }}

</div>
<br>
<br>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>unehrlich</div>
    <div style="margin: 3px"></div>

    {{ form.ehrlichkeitArtikel2 }}

</div>
<br>
<br>
<div class="form-check-inline" style="margin-bottom:1%; margin-top:0.8%">
    <div>unseriös</div>
    <div style="margin: 3px"></div>

    {{ form.serioesitaetArtikel2 }}

</div>

<br>
<hr>
<div>
    Wie haben Sie den Austausch im Chat wahrgenommen?
</div>
<div class="form-check-inline" style="margin-bottom:3%; margin-top:0.8%">
    <div>Sehr unnatürlich</div>
    <div style="margin: 3px"></div>

    {{ form.austauschChat }}

</div>
<br>



<button class="otree-btn-next btn btn-primary" style="background-color:#D11222; border-color:#ffffff">Weiter</button>

<hr>
<p> <a href="mailto: lob@stud.uni-heidelberg.de" target="_blank" style="color:#D11222">Aaron Lob</a>, Universität Heidelberg  - 2020</p>

{% endblock %}