{{ block style }}
    <style>
    table {
          table-layout: fixed ;
          width: 100% ;
        }
     th {
      width: 20%
        text-align: center;
        vertical-align: middle;
      }
        td {
            text-align: center;
            vertical-align: middle;
            }
        tr {
        text-align: center;
        vertical-align: middle;
        }

input[type=radio] {
    border: 0px;
    width: 50%;
    height: 1.5em;
}


.slidecontainer {
  width: 100%;
}


.slider {
   margin: auto;
  -webkit-appearance: none;
  width: 80%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: flex
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0736f0;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0736f0;
  cursor: pointer;
}
</style>


{{ endblock }}

{{ block title }}
Survey Part 2 - Q1
{{ endblock }}

{{ block content }}
  <div class="card bg-light m-3">
<div class="card-body">

    <p> Consider the participants taking the role of  <span style="color:blue;"><strong>{{ player.participant.rol }}</strong></span>.</p>
   <br>
    <p> For this question, you will analyze the first round and there is no extra information about the other participants.</p>




      <div class="card bg-light m-3">
      <div class="card-body">
          <center><h4>According to the other participants, how appropriate is it for </h4></center>
          <center><h4><span style="color:blue;">{{ player.participant.rol }}</span> to contribute 5 or less in the first round?</h4></center>
        <table class="table table-hover table-striped table-responsive mx-auto ">
        <thead>


            <tr>

                <th>"Very Socially Inappropriate"</th>
                <th>“Somewhat Socially Inappropriate”</th>

                <th>“Somewhat Socially Appropriate”</th>
                <th>“Very Socially Appropriate”</th>
            </tr>
                        <td><input type="radio" value="1" name="norm1" required/></td>
            <td><input type="radio" value="2" name="norm1"/></td>
            <td><input type="radio" value="3" name="norm1"/></td>
            <td><input type="radio" value="4" name="norm1"/></td>
          </table>


         </div>




</div>
</div>
        </div>

<div> <center>
            {{ next_button }}
</center>
</div>
                 </div>




           </div>

{{ endblock }}

            {{block script}}

<script>

let description2 = document.getElementById('description2');


function updateDescription2(input) {
    let take = parseInt(input.value)/10;
    description2.innerText = `${take}`;
    var x = document.getElementById("see")
    x.style.display = "block"
}

</script>
{{endblock}}