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

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

.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 3 - Q8
{{ 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>
        </table>
<br>
    <table class="table table-hover table-striped table-bordered">
        <tr style="font-size:18px;background-color:#A9A9A9; " >  <td><strong>Project's contributions in the first round</strong> </td> <td></td></tr>
        <tr>
            <td><strong>{{player.participant.rol}}  </strong> contributed:</td>
            <td style="width: 200px" align="center"> 9 </td>

        </tr>
	    <tr>
            <td><strong>Group Member 2</strong> contributed:</td>
            <td style="width: 200px" align="center"> 5</td>
        </tr>
        <tr>
            <td><strong><strong>Group Member 1</strong></strong> contributed:</td>
            <td style="width: 200px" align="center"> 15</td>
</tr>

        <tr>
    </tr>
    </table>
    </div>



      <div class="card bg-light m-3">
      <div class="card-body">
            <p>What is the most common response to the following statement:</p>
        <center><h4> <span style="color:blue;"><strong>{{ player.participant.rol }}</strong></span> contributed enough</h4></center>
        <table class="table table-hover table-striped table-responsive mx-auto ">
        <thead>


            <tr>
                <th>"Strongly disagree"</th>
                <th>“Partially disagree”</th>

                <th>“Partially agree”</th>
                <th>“Strongly agree”</th>
            </tr>
            <td><input type="radio" value="1" name="per4" required/></td>
            <td><input type="radio" value="2" name="per4"/></td>
            <td><input type="radio" value="3" name="per4"/></td>
            <td><input type="radio" value="4" name="per4"/></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}}