{% extends "global/Page.html" %}
{% load otree static %}
{% block of scripts %}
<script>
    $(function (){

        $("button.answer").on("click",function (){
            liveSend({'t':'answer1','answer1':$(this).val() });
            this.blur();
            $('#form')[0].submit();

        })})

</script>



{% endblock %}
{% block of styles %}
<style>
.text {
    font-family: Calibri;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

}
.otree-btn-next{
    background-color: red;
    position: absolute;
    right: 20%;
}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

.positioningava{
    width: 5%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.positioning1{
    float: left; width: 15%; margin-right: 15%; margin-bottom: 0.5em



}
.positioning2{
     float: left; text-align: center; width: 15%; margin-right: 15%; margin-left: 4%; margin-bottom: 0.5em;
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;



}
.large-options {
        height: 250px;
        width: 150px;
        margin-top: 1%;
        margin-bottom: 1%;
    background-color: transparent;
    border: none;
        cursor: pointer;
    }

    .container .answer:hover {
        background-color: #e9e9e9;
        opacity: 0.3;
        border-radius: 5px;
    }

  #large-options-container {
        width: 25%;
        height: 40%;
        position: absolute;
        bottom: 0;


    }
   #large-options-container2 {
        width: 25%;
        height: 40%;
        position: absolute;
        bottom: 0;
       margin-left: 18%;


    }
.positioning3{
    float: left; width: 15%; margin-left: 15%; margin-bottom: 0.5em



}
.positioning4{
     float: left; text-align: center; width: 15%; margin-left: 18%; margin-bottom: 0.5em;
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;



}
.positioning5{
    float: left; margin-right: 30%; margin-bottom: 0.5em



}
</style>
{% endblock %}
{{ block content }}


<br>
<div class="text">
<img class="positioningava" src="{{ava_pic}}">
</div>

<div class="title">
    Stage 3
</div>
<br>
{{if treat == 2}}
<div class="text">
We would now like you to choose which member of your Group you would like to work with in Stage 4 (which is described below). If you choose a given member of your group and this member also chooses you, then the two of you will work together in Stage 4 and the third member will work alone.

</div>
<br>
{{endif}}

<div class="text">
    Stage 4 instructions: In this stage, you will spend 10 minutes carefully reviewing the responses you provided to the survival questions in Stage 2. You will have the opportunity to change your responses if you wish. {{if treat == 2}}Members of your group who chose to work with each other will be allowed to communicate via chat and discuss their answers.{{endif}} Unselected members of the group will work alone. Your earnings will be based on the final answers submitted after this stage. You will only be permitted to move to Stage 5 once the ten minutes are up. You can now make your choice below:

</div>
<br>

<br>
<img class="positioning1" src="{{imgColl1}}">


    <img class="positioning1" src="{{imgColl2}}">
<p style="clear: both;">
{{ for choice in form.part2vote }}
    <div class="positioning2">
        {{ choice }}
    </div>
    {{ endfor }}



<p style="clear: both;">

<div class="positioning2">{{part1}}</div>
<div class="positioning2">
    {{part2}}
</div>
    <p style="clear: both;">

<img class="positioning3" src="{{ava_pic}}">
        <p style="clear: both;">
<div class="positioning4">
    You (P{{number_in_group}})
</div>

<p style="clear: both;">
{{ next_button }}




{{ endblock }}