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

{% block head_title %}

        Survey

{% endblock %}

{% block styles %}

    <style type="text/css">
        .form-check form-check-inline label {
            float: left;
            width: 100%;
            margin-top: -20px;
            margin-bottom: 30px;
        }

        td {
             border-style : hidden!important;
        }

    h1 {text-align: center; font-size: 35px;}


    </style>



{% endblock %}

{% block content %}

<h1>Questionnaire</h1>

    <p style="text-align: justify; font-size: 18px;">
        <br> On a scale of 1-10, how stressed did you feel while playing the game? <br>
    </p>

<br>
    <div class="table">

        <table style="width:100%; border:none;">
            <tr>
                <td width="20%"><center>Not stressful at all</center></td>
                <td width="6%"><center>1</center></td>
                <td width="6%"><center>2</center></td>
                <td width="6%"><center>3</center></td>
                <td width="6%"><center>4</center></td>
                <td width="6%"><center>5</center></td>
                <td width="6%"><center>6</center></td>
                <td width="6%"><center>7</center></td>
                <td width="6%"><center>8</center></td>
                <td width="6%"><center>9</center></td>
                <td width="6%"><center>10</center></td>
                <td width="20%"><center>Very stressful</center></td>
            </tr>
            <tr>
                <td width="20%"><center></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="1" value="1"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="2" value="2"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="3" value="3"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="4" value="4"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="5" value="5"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="6" value="6"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="7" value="7"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="8" value="8"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="9" value="9"></center></td>
                <td width="6%"><center><input type="radio" name="survey" id="10" value="10"></center></td>
                <td width="20%"><center></center></td>
            </tr>
        </table>
    </div>


    <p id="abc" style="color: black; text-align: center;"></p>


    <input type="hidden"   name="survey"    id="id_survey"   />




    <center><button class="otree-btn-next btn btn-primary" onclick="myFunction()">Next</button></center>







{{ form.errors }}


{% endblock %}



{% block scripts %}
    <script type="text/javascript">

        var level = 0;

        function myFunction() {
              if (document.getElementById("1").checked) {
                  level = document.getElementById('1').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("2").checked) {
                  level = document.getElementById('2').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("3").checked) {
                  level = document.getElementById('3').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("4").checked) {
                  level = document.getElementById('4').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("5").checked) {
                  level = document.getElementById('5').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("6").checked) {
                  level = document.getElementById('6').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("7").checked) {
                  level = document.getElementById('7').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("8").checked) {
                  level = document.getElementById('8').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("9").checked) {
                  level = document.getElementById('9').value;
                  document.getElementById('id_survey').value = level;
              }
              if (document.getElementById("10").checked) {
                  level = document.getElementById('10').value;
                  document.getElementById('id_survey').value = level;
              }
              if (!$("input[name='survey']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please select one of the options!";
                   event.preventDefault();
              }
        }




    document.getElementById('id_survey').value = level;





    </script>
{% endblock %}