{{ block title }}{{ endblock }}
{{ block content }}
<br>

<h5>Please indicate your agreement with the following statements <strong><u>with regard to the task:</u></strong></h5>

<br>

<table class="table table-sm table-hover table-striped table align-middle table-responsive">
    <thead class="table-light">

    <tr>
      <td scope="col" style="font-size: 15px;" class="text-nowrap"> </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 1 -<br>Strongly disagree </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 2 -<br>Disagree </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 3 -<br>Slightly disagree </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 4 -<br>Neutral </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 5 -<br>Slightly agree </td>
      <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 6 -<br>Agree </td>
        <td scope="col" style=" font-size: 15px;" class="text-nowrap text-center"> 7 -<br>Strongly agree </td>
    </tr>
    </thead>

    <tbody>
    {% for field in form %}
        {% if field.name != 'frustration' %}
            <tr>
                <td style="font-size: 15px;">{{ field.label }}</td>
                {% for choice in field %}
                    <td class="text-center">{{ choice }}</td>
                {% endfor %}
            </tr>
        {% endif %}
    {% endfor %}
</tbody>
</table>
<br><br><br>


<style>
    .mgslider-wrapper {
        border-spacing: 10px;
    }

    .mgslider-limit {
        width: 10%;
        min-width: 75px;
        height: 40px;
        margin: 100px;
        text-align: center;
        white-space: nowrap;
    }

    .mgslider-limit, .mgslider-value {
        font-variant-numeric: tabular-nums;
    }

    .mgslider-before {
        height: 16px;
        width: 100%;
        background: #1e5bff;
    }

    .mgslider-feedback {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>

    {{ formfield_errors 'frustration' }}

    <h6>Please indicate on the slider how frustrated you felt while performing the task:</h6>
    <br>
    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider.js' }}"></script>

    <script>
        $(document).ready(function (event) {
            slider2 = new mgslider("frustration", 0, 100, 1);
            slider2.print(document.getElementById("sliders_here"));
        });
    </script>


{{ next_button }}

{{ endblock }}