{% 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 align=center><font color="blue">Practice Round - Period 2</font></H1>
<font size="4">

<p>This is the last period of this round. Who wins or loses in this period will not affect the bid multiplier rules next.
    <br/>{% if player.id_in_group == 2 %} You {% else %} B {% endif %}
    {% if group.Winner_A %} lost in period 1. {% else %} won in round 1. {% endif %}
    {% if player.id_in_group == 1 %} Your {% else %} A's {% endif %}
    {% if group.Winner_A %} bid will continue to get multiplied by 3. {% else %} bid will not get multiplied by 3 anymore. {% endif %}</p>
<br>

<div class="slidecontainer">
  <p>Guess your opponent's bid = <input type="range" min="0" max="100"  class="slider" id="myRange1">
  <input type="text" id="demo1" name="Perceived_investment_2" onkeypress="return event.keyCode != 13;"></p>
</div>
<br>

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

<br/><font size="5">Your Chance of winning = </font>
   {% if group.Winner_A %} <strong><font size="5" color="red"><span id="PDiff"></span>%</font></strong>
    {% else %} <strong><font size="5" color="red"><span id="PSame"></span>%</font></strong> {% endif %}


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

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) {paS.innerHTML = X(parseInt(slider.value), parseInt(slider2.value)).toFixed(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 {
paD.innerHTML = "50";
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
 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);
{% 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 {
paD.innerHTML = "50";
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
 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);
{% 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 {
paD.innerHTML = "50";
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
 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);
{% 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 {
paD.innerHTML = "50";
{% if player.id_in_group == 1 %}
paD.innerHTML = "75";
{% else %}
paD.innerHTML = "25"; {% endif %}
}
 next.removeAttribute("disabled");
}
}


</script>

{% endblock %}