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

Trial Number {{ subsession.round_number }}<br/>
{% if subsession.round_number < 4%} Practice Trial {{ subsession.round_number }} of 3 {% else %}  {% endif %}
<h3 align=center><font color="blue">Round 1</font></H3>

<br> 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>  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>   For each point that A bids,
   the computer puts 3 'A' balls in the Bid Bag.
{% endif %}
<br>
<br>Use the sliders or insert numbers below to choose and submit 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" name="Perceived_investment">
    <p>Prediction of {% 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;
        (<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" name="investment">
  <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>
    <p>If {{ other_player_role }} bids what you predict: <br/>
<center>
<table style="display: inline-block; border: 1px solid; float: left; ">
    <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 <strong>earn <font color="red"><span id="winPay"></span> </font></strong> points</li>
          <li><strong>{{ other_player_role }}</strong> loses and earns <strong><span id="othLosePay"></span></strong> points</li>
            <li>In round 2, the computer will {% if player.id_in_group == 1 %}again put 3 'A' balls{% else %} put 1 'A' ball{% endif %} in the 'bid bag' for every point that A bids.</li>
          </ul></td>
        <td colspan="2"><ul><li><strong>You</strong> lose and <strong>earn <font color="red"><span id="winLose"></span> points</font></strong></li>
          <li><strong>{{ other_player_role }}</strong> wins and <strong>earns <span id="othWinPay"></span></strong> points</li>
           <li>In round 2, the computer will {% if player.id_in_group == 1 %}put 1 'A' ball{% else %} put 3 'A' balls{% endif %} in the 'bid bag' for every point that A bids.</li>
          </ul></td>

    </tr>
</table>
</center>

<div style="border: thin solid black">
  <center>  <font color = #9400d3>Payoff in a trial<br/>
      For A: Round 1 Payoff + (0.1 * Round 2 Payoff)<br/>
      For B: Round 1 Payoff + (5 * Round 2 Payoff)
  </font> </center>
</div>
<br>
<br>

    {% next_button %}

<script>

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>




{% endblock %}