{% 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 round 2</font></H3>
<font size="4">
<br>Use the sliders below to see the potential payoffs for different combinations of bids.
<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;
       <!--If A wins in Round 1 - (<span id="othBall"></span>
        {% if player.id_in_group == 1 %} 'B' balls) {% else %} 'A' balls)
    {% endif  %} <br/>
        &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; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
           If B wins in Round 1 - (<span id="newothBall"></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;
<!--If A wins in Round 1 - (<span id="ownBall"></span>
        {% if player.id_in_group == 1 %} 'A' balls) {% else %} 'B' balls)
    {% endif  %} <br/>
        &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; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             If B wins in Round 1 - (<span id="newownBall"></span>
        {% if player.id_in_group == 1 %} 'A' balls) {% else %} 'B' balls)
    {% endif  %}--><br/>{{ other_player_role }} keeps = <span id="keep"></span> points<br/>
  </p>
</div>
</font>
<font size="2">
<table style="display: inline-block; border: 1px solid; float: left; ">
    <tr>
        <th colspan="4"><h6><center><font color="#663399" >If {% if player.id_in_group == 1 %}You win{% else %}A wins{% endif %} in round 1</font></center></h6></th>
    </tr>
    <tr>
        <td colspan="2"><center><font color="red" ><span id="WinP"></span>%</font> chance</center></td>
        <td colspan="2"><center><font color="red" ><span id="NegPDiff"></span>%</font> chance</center></td>
    </tr>
    <tr>
        <td colspan="2"><ul><li><strong>You</strong> win and earn<strong><font color="red" ><span id="winPay"></span></font> points</strong></li>
          <li><strong>{{ other_player_role }}</strong> loses and earns <strong><span id="othLosePay"></span></strong> points</li>
          </ul></td>
        <td colspan="2"><ul><li><strong>You</strong> lose and earn<strong><font color="red" > <span id="winLose"></span></font> </strong> points</li>
          <li><strong>{{ other_player_role }}</strong> wins and <strong>earns <span id="othWinPay"></span></strong> points</li>
          </ul></td>

    </tr>
</table>

<table style="display: inline-block; border: 1px solid; ">
    <tr>
        <th colspan="4"><h6><center><font color="#663399" >If {% if player.id_in_group == 1 %}B wins{% else %}You win{% endif %} in round 1</font></center></h6></th>
    </tr>
    <tr>
        <td colspan="2"><center><font color="red" ><span id="newWinP"></span>% </font>chance</center></td>
        <td colspan="2"><center><font color="red" ><span id="newNegPDiff"></span>% </font>chance</center></td>
    </tr>
    <tr>
        <td colspan="2"><ul><li><strong>You</strong> win and earn <strong><font color="red" > <span id="newwinPay"></span></font> points</strong></li>
          <li><strong>{{ other_player_role }}</strong> loses and earns <strong><span id="newothLosePay"></span></strong>points</li>
          </ul></td>
        <td colspan="2"><ul><li><strong>You</strong> lose and <strong>earn<font color="red" > <span id="newwinLose"></span></font> </strong> points</li>
          <li><strong>{{ other_player_role }}</strong> wins and <strong>earns <span id="newothWinPay"></span></strong> points</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");
var newothBall = document.getElementById("newothBall");
var newownBall = document.getElementById("newownBall");
var newwinP = document.getElementById("newWinP");
var newNegpaD = document.getElementById("newNegPDiff");
var newwinPay = document.getElementById("newwinPay");
var newothWinPay = document.getElementById("newothWinPay");
var newothLosePay = document.getElementById("newothLosePay");
var newwinLose = document.getElementById("newwinLose");




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

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

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

function newnegY(a, b) {
return 100*a/(a + 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 %}
newNegpaD.innerHTML = newnegY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
newwinP.innerHTML = newY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
newNegpaD.innerHTML = 50;
newwinP.innerHTML = 50;
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
newothWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
newothLosePay.innerHTML = K(parseInt(slider.value));
newothBall.innerHTML = othA(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 %}
newNegpaD.innerHTML = newnegY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
newwinP.innerHTML = newY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
newNegpaD.innerHTML = 50;
newwinP.innerHTML = 50;
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
newothWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
newothLosePay.innerHTML = K(parseInt(slider.value));
newothBall.innerHTML = othA(parseInt(slider.value));
{% if player.id_in_group == 1 %}
othBall.innerHTML = othA(parseInt(slider.value));
    {% else %}
othBall.innerHTML = othB(parseInt(slider.value));
    {% endif %}
}

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 %}
newNegpaD.innerHTML = newnegY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
newwinP.innerHTML = newY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
newNegpaD.innerHTML = 50;
newwinP.innerHTML = 50;
}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
newwinPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
newwinLose.innerHTML = K(parseInt(slider2.value));
newownBall.innerHTML = othA(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 %}
newNegpaD.innerHTML = newnegY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
newwinP.innerHTML = newY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
newNegpaD.innerHTML = 50;
newwinP.innerHTML = 50;
}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
newwinPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
newwinLose.innerHTML = K(parseInt(slider2.value));
newownBall.innerHTML = othA(parseInt(slider2.value));
{% if player.id_in_group == 1 %}
ownBall.innerHTML = othB(parseInt(slider2.value));
    {% else %}
ownBall.innerHTML = othA(parseInt(slider2.value));
    {% endif %}
}

</script>





    {% next_button %}

{% endblock %}