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

p.round1 {
  border: 2px solid blue;
  border-radius: 5px;
}

</style>
<h1 align=center><font color="blue">Sliders for Chances</font></H1>
<font size="4">
<div class="slidecontainer">
  <input type="range" min="0" max="100"  class="slider" id="myRange1">
  <p> Your Bid: <input type="text" id="demo1" onkeypress="return event.keyCode != 13;"></p>
</div>
<br>
<div class="slidecontainer2">
  <input type="range" min="0" max="100" class="slider2" id="myRange2">
  <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>
<p>If A's bid is multiplied by 1 and B's bid is multiplied by 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>
            <mtext>Your&#xA0;Bid</mtext>
        </mrow><mrow>
        <mtext>Your&#xA0;Bid&#xA0;+&#xA0;{% if player.id_in_group == 1 %}B's {% else %} A's &#xA0;Bid</mtext>{% endif %}
    </mrow>
    </mfrac>
</math> = <strong><font size="5" color="red"><span id="PSame"></span>%</font></strong></p>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mtext>{% if player.id_in_group == 1 %} B's {% else %} A's &#xA0;Chance&#xA0;of&#xA0;Winning&#xA0;&#xA0;=&#xA0;</mtext>{% endif %}
    <mfrac>
        <mtext>{% if player.id_in_group == 1 %} B's {% else %} A's &#xA0;Bid</mtext>{% endif %}
        <mrow>
            <mtext>Your&#xA0;Bid&#xA0;+&#xA0;{% if player.id_in_group == 1 %}B's {% else %} A's &#xA0;Bid</mtext>{% endif %}
        </mrow>
    </mfrac>
</math> = <strong><font size="5" color="red"><span id="PSame"></span>%</font></strong></p>
<p>If A's bid is multiplied by 3 and B's bid is multiplied by 1<br><math xmlns="http://www.w3.org/1998/Math/MathML">
    <mtext>A's&#xA0;Chance&#xA0;of&#xA0;Winning&#xA0;&#xA0;=&#xA0;</mtext>
    <mfrac>
        <mrow>
            <mn>3</mn>
            <mo>&#xD7;</mo>
            <mtext>A's&#xA0;Bid</mtext>
        </mrow><mrow>
        <mn>3</mn>
        <mo>&#xD7;</mo>
        <mtext>A's&#xA0;Bid&#xA0;+&#xA0;B's&#xA0;Bid</mtext>
    </mrow>
    </mfrac>
</math> = <strong><font size="5" color="red"><span id="PDiff"></span>%</font></strong></p>
<br>
Exercise: If your opponent chooses 30 and you choose 60, what are your chances of winning
<ol><li>{% formfield player.slidera label="If your bid is multiplied by 3?" %}</li>
<li>{% formfield player.sliderb label="If your bid is multiplied by 1?" %}</li></ol>

    <div> <button id="next" type="submit" disabled>Next</button></div>
    <br></font>

<script>
var next = document.getElementById("next");
var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");

var paS = document.getElementById("PSame");
var paD = document.getElementById("PDiff");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");

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

slider.oninput = function() {
 output.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {paS.innerHTML = X(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
paS.innerHTML = "50";
paD.innerHTML = "75";
}
 next.removeAttribute("disabled");
}
}

output.oninput = function() {
 slider.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {paS.innerHTML = X(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
paS.innerHTML = "50";
paD.innerHTML = "75";
}
 next.removeAttribute("disabled");
}
}

slider2.oninput = function() {
  output2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {paS.innerHTML = X(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
paS.innerHTML = "50";
paD.innerHTML = "75";
}
 next.removeAttribute("disabled");
}
}

output2.oninput = function() {
  slider2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {paS.innerHTML = X(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
paD.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
} else {
paS.innerHTML = "50";
paD.innerHTML = "75";
}
 next.removeAttribute("disabled");
}
}

</script>


{% endblock %}