{% 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;
}

.bordered_box {
    width: 600px;
    height: 100px;
    border: 1px solid white;
    border-radius: 5px;
}

</style>

{% endblock %}

{% block title %}

Part 3B

{% endblock %}

{% block content %}

<br />

<center>

<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"> &pound;30, &pound;30 </td>
        <td style="text-align: center"> &pound;30, &pound;70 </td>
    </tr>
    <tr>
        <td style="text-align: center"> Option B </td>
        <td style="text-align: center"> &pound;70, &pound;30 </td>
        <td style="text-align: center"> &pound;0, &pound;0 </td>
    </tr>
</table>

</center>

<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 this experiment. </b>
    In other words, report your best estimate of the percentage of other participants from this 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 earn either &pound;0 or &pound;50.
    Your chance of earning &pound;50 depends on the accuracy of your estimate.
    The accuracy of your estimate will again be determined by the same procedure as used in Part 2.
    Recall that under this procedure, 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>

<center>
<div class="bordered_box">

<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>

</div>
</center>

<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 %}