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

{% block styles %}

<style>

input[type=range] {
    width: 300px;
    height: 10px;
    -webkit-appearance: none;
}

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

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    background: #DCDCDC;
}

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

.myclass::-webkit-slider-thumb {
    width: 10px !important;
    height: 30px !important;
    border: 1px solid black;
    border-radius: 5px !important;
    background: #306EFF !important;
    box-shadow: 1px 1px 1px black;
    cursor: pointer !important !important;
    margin-top: -15px !important;
    -webkit-appearance: none !important;
}

.bordered_small {
    width: 50px;
    height: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    display: inline-block;
}

</style>

{% endblock %}

{% block title %}

Questionnaire B

{% endblock %}

{% block content %}

<br />

<table class="table" style="border-bottom: 1px solid #DCDCDC">
    <tr>
        <th> </th>
        <th> </th>
        <th colspan="2" style="text-align: center"> The Other Participant's Choice </th>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> Option B </td>
    </tr>
    <tr>
        <th rowspan="2" style="text-align: center; vertical-align: middle"> Your Choice </th>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> &euro;30, &euro;30 </td>
        <td style="text-align: center"> &euro;30, &euro;70 </td>
    </tr>
    <tr>
        <td style="text-align: center"> Option B </td>
        <td style="text-align: center"> &euro;70, &euro;30 </td>
        <td style="text-align: center"> &euro;0, &euro;0 </td>
    </tr>
</table>

<p align="center">
<i> Table 1: Possible Results </i>
</p>

<br />

<p align="justify">
Thirdly, <b> report your best estimate of the distribution of choices among the other participants in today's experiment. </b>
In other words, report your best estimate of the percentage of other participants from today's experiment who chose each of the two options.
</p>

{% if player.treatment == 2 %}

<p align="justify">
If this decision is randomly selected to determine your bonus payment, you will earn either &euro;0 or &euro;50.
Your chance of earning &euro;50 depends on the accuracy of your estimate.
The accuracy of your estimate will again be determined using the <b> binarized scoring rule</b>.
Recall that under this scoring rule, you always maximize your expected earnings by <b> reporting your estimate truthfully</b>.
</p>

{% endif %}

<br />

<p align="center">
What is your best estimate of the distribution of choices?
</p>

<div id="formfields" style="display: none">
{% formfield player.belief %}
</div>

<div class="value" style="color: transparent"> - </div>

<center>
Option A &emsp;
<input type="range" min="0" max="100" step="1" value="0" id="id_belief">
&emsp; Option B
</center>

<center>
<div class="bordered_small"> <span class="left" id="left"> </span>% </div>
&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &ensp;
<div class="bordered_small"> <span class="right" id="right"> </span>% </div>
</center>

<br />
<br />

<center> {% next_button %} </center>

{% endblock %}

{% block scripts %}

<script>

$(document).ready(function () {
    $('input[type=range]').on('input change', function () {
        $('input[type=range]').addClass('myclass');
    });
});

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
    var newValue = elem.value;
    document.querySelector('.value').innerHTML = newValue;
    var left = 100 - newValue;
    document.querySelector("#left").innerHTML = left;
    var right = newValue;
    document.querySelector("#right").innerHTML = right;
    document.getElementsByName("belief")[0].value = right;
}

elem.addEventListener("input", rangeValue);

</script>

{% endblock %}