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

<h1>Practice Round 1 - Period 1</h1>

Please move the sliders or insert numbers to see your chances of winning for different combinations of bids.
<br>
<br>
<div class="slidecontainer">
  <p>If your opponent's bid = <input type="range" min="0" max="100"  class="slider" id="myRange1">
  <input type="text" id="demo1" onkeypress="return event.keyCode != 13;"></p>
</div>

<div class="slidecontainer2">
  <p>And your Bid = <input type="range" min="0" max="100" class="slider2" id="myRange2">
  <input type="text" id="demo2" onkeypress="return event.keyCode != 13;"></p>
</div>

<p>{% if player.id_in_group == 1 %} Your bid is multiplied by 3 and your opponent's bid is multiplied by 1.<br/> So, Your Chance of winning =
    {% else %} Your bid is multiplied by 1 and your opponent's bid is multiplied by 3.<br/> So, Your Chance of winning =  {% endif %}<span id="PDiff"></span>%</p>

<p>To submit your decision -
{% formfield player.Perceived_investment label="Please insert what you think the other player will bid out of 100:" %}
{% formfield player.investment label="Please insert your bid out of 100" %} </p>

    {% next_button %}
<br>

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

{% endblock %}