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

{% block title %}

{% endblock %}

{% block content %}
<h1 align=center><font color="blue">In each period</font></H1>
<font size="4">
<br>{% if player.id_in_group == 1 %} Your bid is multiplied by 3 and B's bid is multiplied by 1.{% else %} A's bid is multiplied by 3 and your bid is multiplied by 1.{% endif %}
<br>
<br>Use the sliders below to see probability of winning for different combinations of bids.
<br>
<div class="slidecontainer">
  <input type="range" min="0" max="100"  class="slider" id="myRange1">
    <p>{% if player.id_in_group == 1 %}B's {% else %} A's {% endif  %} Bid: <input type="text" id="demo2" onkeypress="return event.keyCode != 13;"></p>
</div>
<br>
<div class="slidecontainer2">
  <input type="range" min="0" max="100" class="slider2" id="myRange2">
  <p>Your Bid: <input type="text" id="demo1" onkeypress="return event.keyCode != 13;"></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>
            <mn></mn>
            <mo>&#xD7;</mo>
            <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%} = <strong><font size="5" color="red"><span id="PDiff"></span>%</font></strong>
<br>
    <br></font>

<script>

var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
var paD = document.getElementById("PDiff");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");

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

function myFunction(a, b) {
return 100*b/(b + (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 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% 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 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% 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 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% 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 %}
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
paD.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0); {% endif %}
} else {
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
}
}

</script>





    {% next_button %}

{% endblock %}