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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    display: none;
    }
.form-check-input {
    position: relative;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 6% ;
}

span{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #AED6F1;
    float: left;
    width: 100px;
}

input[type="range"] {
  width:150px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;

  background: 	#D3D3D3;
  border-radius: 1.3px;
}
.range {
  --ticksThickness: 2px;
  --ticksHeight: 20%;
  --ticksColor: silver;

  display: inline-block;
  background: silver;
  background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
  background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - 1%) var(--ticksHeight);
  background-position: 0 bottom;
  position: relative;
  width:150px;
}

/* min / max labels at the edges */
.range::before, .range::after {
  font: 11px sans-serif;
  position: absolute;
  bottom: 2ch;
}

.range::before {
  counter-reset: x var(--min);
  transform: translateX(-100%);
  right:5;
  content: "Very Appropriate";
}

.range::after {
  counter-reset: x var(--max);
  right: 0;
  transform: translateX(100%);
  content: "Very Inappropriate";
}

.range > input {
  width: 200px;
  margin: 0 0px; /* Critical adjustment */
}

</style>
{% endblock %}

{% block content %}
<div class="card info" style="background-color:#AED6F1;">
    <p>
    Suppose football supporters have 100 Tokens to bet as they wish on (1) a win by their favorite team, (2) a draw, and (3) a win by the opposing team.
    </p>
    <p>
For a football match of your favorite team, we would like you to rate the appropriateness of the behavior of a supporter of your favorite team depending on how much they bet on the opposing team.
    </p>
    <p>
On a scale of 10 ("Very Appropriate") to -10 ("Very Inappropriate"), please rate the appropriateness of the behavior of a supporter of your favorite team who bet on the opposing team for different bet amounts.
    </p>
You would be paid 4 Tokens for every rating that matches the most frequent rating from other respondents who also support your favorite team.
    <br><br>
</div>
<br><br>
<div class="card info" style="margin: 0 auto;">

    <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px; visibility: hidden;">
        <span class="input-group-text"> 0 Tokens  </span>
    </div>
    <div class="range" style="--step:5; --min:-10; --max:10">

    <input type="range"  min="-10" max="10" step="1" oninput="updateTextInput0(this.value)" style="visibility: hidden; direction: rtl;">
    </div>

    <div class="input-group-append" style="padding: 5px 5px; display:inline;visibility: hidden;" >
        <span class="input-group-text"  style="width: 50px"> &nbsp </span>
    </div>
</div>
<div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 0 Tokens &nbsp &nbsp </span>
    </div>

    <input type="range" name="appbet_0" id="appbet_0" min="-10" max="10" step="1" oninput="updateTextInput0(this.value)" style="direction: rtl;">

    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput0" style="width: 50px"> &nbsp </span>
    </div>
</div>
    <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 1 Token &nbsp &nbsp &nbsp </span>
    </div>
    <input type="range" name="appbet_1" id="appbet_1" min="-10" max="10" step="1" oninput="updateTextInput1(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput1" style="width: 50px"> &nbsp </span>
    </div>
</div>
        <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 10 Tokens &nbsp </span>
    </div>
    <input type="range" name="appbet_10" id="appbet_10" min="-10" max="10" step="1" oninput="updateTextInput10(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput10" style="width: 50px"> &nbsp </span>
    </div>
</div>
        <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 25 Tokens &nbsp </span>
    </div>
    <input type="range" name="appbet_25" id="appbet_25" min="-10" max="10" step="1" oninput="updateTextInput25(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput25" style="width: 50px"> &nbsp </span>
    </div>
</div>
        <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 50 Tokens &nbsp </span>
    </div>
    <input type="range" name="appbet_50" id="appbet_50" min="-10" max="10" step="1" oninput="updateTextInput50(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput50" style="width: 50px"> &nbsp </span>
    </div>
</div>
        <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 75 Tokens &nbsp </span>
    </div>
    <input type="range" name="appbet_75" id="appbet_75" min="-10" max="10" step="1" oninput="updateTextInput75(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput75" style="width: 50px"> &nbsp </span>
    </div>
</div>
        <div class="input-group" style="display: flex; margin: 0 auto;">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> 100 Tokens </span>
    </div>
    <input type="range" name="appbet_100" id="appbet_100" min="-10" max="10" step="1" oninput="updateTextInput100(this.value)" style="direction: rtl;">
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput100" style="width: 50px"> &nbsp </span>
    </div>
</div>
    <br>
</div>
    <br>

<br><br>
<div style="display:inline-block; margin:0; float: left;">  </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="page14_time" id="page14_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;

init_val = Math.random()*100
  var SliderTouched = false;

    $(document).ready(function() {
        startpage_time = Date.now();
    });

          function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('page14_time').value=page_time;
           };

function updateTextInput0(val) {
          var amount0 = parseFloat(val);
          document.getElementById('textInput0').innerHTML=amount0;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput1(val) {
          var amount1 = parseFloat(val);
          document.getElementById('textInput1').innerHTML=amount1;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput10(val) {
          var amount10 = parseFloat(val);
          document.getElementById('textInput10').innerHTML=amount10;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput25(val) {
          var amount25 = parseFloat(val);
          document.getElementById('textInput25').innerHTML=amount25;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput50(val) {
          var amount50 = parseFloat(val);
          document.getElementById('textInput50').innerHTML=amount50;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput75(val) {
          var amount75 = parseFloat(val);
          document.getElementById('textInput75').innerHTML=amount75;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
function updateTextInput100(val) {
          var amount100 = parseFloat(val);
          document.getElementById('textInput100').innerHTML=amount100;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }
</script>
{% endblock %}