{{ block title }}Attitude towards the AI system{{ endblock }}

{{ block global_styles  }}
    <link rel="stylesheet" href="{{ static 'global/style_sheet.css' }}">
    <link href= "{{static 'global/noUiSlider/dist/nouislider.css'}}" rel="stylesheet">
    <script src="{{static 'global/noUiSlider/dist/nouislider.js'}}"></script>
{{ endblock }}


{{ block content }}

<script>
    // When players click on table cell radio button gets selected
            $(document).on("click","td",function(){
                $(this).find("input:radio").prop("checked", true);
            })

        $(document).ready(function() {
            var slider1 = document.getElementById('FP_perception_inputfield');

            var range = {
                'min': [0],
                'max': [100]
            };

            noUiSlider.create(slider1, {
                range: range,
                start: 50,
                step: 1,
                tooltips: true,
                pips: {
                    mode: 'count',
                    values: 7,
                    density: 1
                }

            });

            // write slider result into form field for data export
            document.getElementById("next-button").addEventListener("click", function () {
                document.getElementById("FP_perception_playerfield").value = parseInt(slider1.noUiSlider.get(true))
            });


            var slider2 = document.getElementById('FN_perception_inputfield');

            var range = {
                'min': [0],
                'max': [100]
            };

            noUiSlider.create(slider2, {
                range: range,
                start: 50,
                step: 1,
                tooltips: true,
                pips: {
                    mode: 'count',
                    values: 7,
                    density: 1
                }

            });

            // write slider result into form field for data export
            document.getElementById("next-button").addEventListener("click", function () {
                document.getElementById("FN_perception_playerfield").value = parseInt(slider2.noUiSlider.get(true))
            });

            var slider3 = document.getElementById('Acc_perception_inputfield');

            var range = {
                'min': [0],
                'max': [100]
            };

            noUiSlider.create(slider3, {
                range: range,
                start: 50,
                step: 1,
                tooltips: true,
                pips: {
                    mode: 'count',
                    values: 7,
                    density: 1
                }

            });

            // write slider result into form field for data export
            document.getElementById("next-button").addEventListener("click", function () {
                document.getElementById("Acc_perception_playerfield").value = parseInt(slider3.noUiSlider.get(true))
            });
        });


</script>

<br>
    <p>
        <b>We would now like you to answer some questions about the AI system truthfully.</b>
    </p>
    <p>
        Now, please give your personal assessment of the following questions.
        There is no 'right' or 'wrong' in these questions, it is just about your personal assessment.
    </p>
<br>


<div>
    <table class="likert">
        <col span="1" class="wide">
        <tr>
            <th></th>
            <th>Strongly disagree</th>
            <th>Disagree</th>
            <th>Rather disagree</th>
            <th>Neutral</th>
            <th>Rather agree</th>
            <th>Agree</th>
            <th>Strongly agree</th>
        </tr>
        <tr>
            <th></th>
            {{for choice in form.algo_expert_treatment.choices}}
            <th>{{choice}}</th>
            {{endfor}}
        </tr>
        <tr>
            <td class="likert_label">{{ form.algo_expert_treatment.label }}</td>
            {{ for choice in form.algo_expert_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.algo_knowledge_treatment.label }}</td>
            {{ for choice in form.algo_knowledge_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.feel_comfortable_treatment.label }}</td>
            {{ for choice in form.feel_comfortable_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.feel_secure_treatment.label }}</td>
            {{ for choice in form.feel_secure_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.feel_content_treatment.label }}</td>
            {{ for choice in form.feel_content_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.transparency_treatment.label }}</td>
            {{ for choice in form.transparency_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.power_treatment.label }}</td>
            {{ for choice in form.power_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.privacy_1_treatment.label }}</td>
            {{ for choice in form.privacy_1_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>
        <tr>
            <td class="likert_label">{{ form.privacy_2_treatment.label }}</td>
            {{ for choice in form.privacy_2_treatment }}
            <td class="likert_choice">{{ choice }}</td>
            {{ endfor }}
        </tr>

    </table>
</div>

<br>


<button id="next-button" class="otree-btn-next btn btn-primary">
    Next
</button>

{{ endblock }}