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

{% block title %}
Section 1: Beliefs
{% endblock %}

{% block content %}

    <div class="card bg-light">
    <div class="card-body">


    <p>
   <div class="alert-warning" align="justify">
            <div class="card-body">

           <strong> Recall: </strong>  Your chances to win a {{ Constants.tot_bonus }} bonus are highest
           if you answer carefully and honestly! </br>
           <small>
               In case you want to read again the instructions,
               <a href data-toggle="collapse" data-target="#demo">click here</a>.
               <br>
               <text id="demo" class="collapse" style="border:1px; border-style:solid; border-color:#0000FF; padding: 1em;">
                   This is Part 1. Here, you will have to guess <strong> 9 characteristics </strong>
                   of an individual portrayed in a picture.
                   To help you in answering the questions, you will have other information on
                   the person, for example their age or information on their assets. </br>
                   You will be asked each questions  <strong> twice  </strong>:
                    <ol>
                    <li> The first time the question will be about what you think (Block 1)  </li>
                    <li> The second time the question will about the question will be about your prediction of what
                        other people from your country think (Block 2) </li>
                    </ol>

                   <strong> Earnings </strong> </br> </br>

                   In this part, you have the chance to earn {{ Constants.tot_bonus }} bonus payment
                   depending on your responses to the questions; your chances to win the {{ Constants.tot_bonus }} bonus are highest if your <strong> answer honestly </strong>.
                   Recent work by researchers at MIT, a leading US university, has lead to the development of an algorithm to
                   detect truthtelling and information. We will assign an <i> information score </i>
                   to each of your response which indicates how truthful
                   and informative you are being about the average person.
                   Once we have collected all the responses to this survey,
                   for each question we will rank the responders
                   by the sum of their information scores.
                   For each question, you will receive {{ Constants.bonus }} bonus if you are in the top one third,
                   for a maximum of {{ Constants.tot_bonus }}.  </br>  </br>

                   <strong> Disclaimer </strong> </br>
                   The pictures you will see are originals. All the pictures are
                   blurred to mask the editing. This completely irrelevant for your payment.

                 </text>
           </small>
   </div>
    </div> <br/>  <br/>

    Imagine you just met for the first time this person: <br />

        <ul>

        </ul>

    <div align="center">
    <br />
    <img class="resize" src="{% static img_to_show %}" width=30% height=30% /> <br />
    <br />
    </div>



    <p>
        This person is <strong>  {{player.image_age}} year-old </strong>
        <strong> {% if player.car == 1 %} and owns a car.{% else %}.{% endif %}</strong> <br/>
        Answer the following questions with your best guess, on a scale from 0 to 10:
    </p>


    <p>

    <table class="table-striped">
    <table id="answers">
            <thead><tr>
             <th>  </th>
            <th>  </th>
            <th>  </th>
             <th> 0 </th>
             <th> 1 </th>
             <th> 2 </th>
             <th> 3 </th>
             <th> 4 </th>
             <th> 5 </th>
             <th> 6 </th>
             <th> 7 </th>
             <th> 8 </th>
             <th> 9 </th>
             <th> 10  </th>

            </thead>
    {% for field in form %}
            <tr>
                <th style="width:70%" > {% autoescape off %} {{ field.label | split:0 }} {% endautoescape %}</th>
                   <td> </td> <td> {{ field.label | split:1 }} </td>
                {% for choice in field %}
                    <td>{{ choice }}</td>
                {% endfor %} <td> {{ field.label | split:2 }} </td>
            </tr>
        {% endfor %}


    </table></p>


    </p>
        * To answer this question assume that you were attracted to individuals of this person's gender.

    </div>
    </div>

    </br>
    {% next_button %}

    <style>
    .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 20px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }

    #answers td, #answers th {
        padding: 15px;
        vertical-align: center;
        text-align: center;
        border-bottom: 1px solid #ddd;
}
    }

    #answers th {
        text-align: center;
        padding-top: 12px;
        padding-bottom: 12px;
        font-weight: bold;
        table-layout: auto;
        vertical-align: center;

    }

    input[type=radio]{
        margin: -4px;
    }


</style>

{% endblock %}