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

{% block title %}

{% endblock %}

{% block content %}
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>

<h3 align=center><font color="blue">In each round</font></H3>
<font size="4">
<br> Since you are Type {{ player.role }}:
{% if player.id_in_group == 1 %} For each point that you bid,
    the computer puts 3 'A' balls in the Bid Bag.
    <br>
 <br>  For each point that B bids, the computer puts 1 'B' ball in the Bid Bag.
{% else %} For each point that you bid,
    the computer puts 1 'B' ball in the Bid Bag.
    <br>
<br>   For each point that A bids,
   the computer puts 3 'A' balls in the Bid Bag.
{% endif %}
<br>
<br>Use the sliders below to choose your prediction of {{ other_player_role }}'s bid and your own bid.
<br>
<br>
<div class="slidecontainer">
  <input type="range" min="0" max="100"  value="0" class="slider" id="myRange1">
    <p>{% if player.id_in_group == 1 %}B's {% else %} A's
    {% endif  %} Bid: <input type="text" id="demo1" onkeypress="return event.keyCode != 13;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        (<span id="othBall"></span>
        {% if player.id_in_group == 1 %} 'B' balls) {% else %} 'A' balls)
    {% endif  %}<br/>{{ other_player_role }} keeps = <span id="othkeep"></span> points<br/>
    </p>
</div>
<br>
<div class="slidecontainer2">
  <input type="range" min="0" max="100" value="0" class="slider2" id="myRange2">
  <p>Your Bid: <input type="text" id="demo2" onkeypress="return event.keyCode != 13;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; (<span id="ownBall"></span>
      {% if player.id_in_group == 1 %} 'A' balls) {% else %} 'B' balls)
    {% endif  %}<br/>You keep = <span id="keep"></span> points <br/>
  </p>
</div>
<!--
 {% if player.id_in_group == 1 %}
<br><math xmlns="http://www.w3.org/1998/Math/MathML">
    <mtext>Your&#xA0;Chance&#xA0;of&#xA0;Winning&#xA0;&#xA0;=&#xA0;</mtext>
    <mfrac>
        <mrow>
            <mn>3</mn>
            <mo>&#xD7;</mo>
            <mtext>Your&#xA0;Bid</mtext>
        </mrow><mrow>
        <mn>(3</mn>
        <mo>&#xD7;</mo>
        <mtext>Your&#xA0;Bid)&#xA0;+&#xA0;B's&#xA0;Bid</mtext>
    </mrow>
    </mfrac>
</math>
    {% else %}
   <br><math xmlns="http://www.w3.org/1998/Math/MathML">
    <mtext>Your&#xA0;Chance&#xA0;of&#xA0;Winning&#xA0;&#xA0;=&#xA0;</mtext>
    <mfrac>
        <mrow>
            <mtext>Your&#xA0;Bid</mtext>
        </mrow><mrow>
        <mn>(3</mn>
        <mo>&#xD7;</mo>
        <mtext>A's&#xA0;Bid)&#xA0;+&#xA0;Your&#xA0;Bid</mtext>
    </mrow>
    </mfrac>
</math>{% endif%}-->
    <p>With this combination of bids, you have: <br/>

    <table class="table">
  <tr>
    <th><span id="WinP"></span>% chance</th>
    <th> <span id="NegPDiff"></span>% chance</th>
  </tr>
  <tr>
      <td><ul><li>You win and earn <span id="winPay"></span> points</li>
                <li>{{ other_player_role }} loses and earns <span id="othLosePay"></span></li>
          </ul></td>
       <td><ul><li>You lose and earn <span id="winLose"></span> points</li>
                <li>{{ other_player_role }} wins and earns <span id="othWinPay"></span></li>
          </ul></td>
  </tr>
</table>
</font>


<script>


    $(document).ready(function() {
      $('.otree-btn-next').hide().delay(60000).fadeIn(1);});

var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
var winP = document.getElementById("WinP");
var NegpaD = document.getElementById("NegPDiff");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
var keep = document.getElementById("keep");
var winPay = document.getElementById("winPay");
var winLose = document.getElementById("winLose");
var othBall = document.getElementById("othBall");
var ownBall = document.getElementById("ownBall");
var othWinPay = document.getElementById("othWinPay");
var othLosePay = document.getElementById("othLosePay");
var othkeep = document.getElementById("othkeep");

function Y(a, b) {
return 300*b/(a + (3*b));
}

function negY(a, b) {
return 100*a/(a + (3*b));
}

function myFunction(a, b) {
return 100*b/(b + (3*a));
}

function negmyFunction(a, b) {
return 300*a/(b + (3*a));
}

function K(a) {
    return 100-a;
}
function W(a) {
    return 200-a;
}

function othA(a) {
    return a;
}

function othB(a) {
    return 3*a;
}


slider.oninput = function() {
 output.value = this.value;
if(output2.value != ""){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
{% if player.id_in_group == 1 %}
othBall.innerHTML = othA(parseInt(slider.value));
    {% else %}
othBall.innerHTML = othB(parseInt(slider.value));
    {% endif %}
}

output.oninput = function() {
 slider.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
}

slider2.oninput = function() {
  output2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
}
{% if player.id_in_group == 1 %}
ownBall.innerHTML = othB(parseInt(slider2.value));
    {% else %}
ownBall.innerHTML = othA(parseInt(slider2.value));
    {% endif %}
}

output2.oninput = function() {
  slider2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
NegpaD.innerHTML = K(paD).toFixed(0);
}
{% if player.id_in_group == 1 %}
ownBall.innerHTML = othB(parseInt(slider2.value));
    {% else %}
ownBall.innerHTML = othA(parseInt(slider2.value));
    {% endif %}
}

</script>





    {% next_button %}

{% endblock %}