{% extends "survey/Instrument.html" %}
{% load otree static %}

{% block title %}
    Participant Survey
{% endblock %}

{% block content %}
<div class="card bg-light">
    <div class="card-body">
        <input type="hidden" name="empathy" id="id_empathy" value="0.0"/>
        <p align="justify">
            <b>Directions: </b>The following statements measure aspects of your personality. Please indicate your
            feelings towards each of these by moving the slider towards the assessment that best describes you.
        </p>
        <br/>
        <table align="center" cellpadding="10">
            {% for item in pt %}
                <tr>
                    <td colspan="12" align="center">
                        {{ item.1 }}
                    </td>
                </tr>
                <tr>
                    <td align="right">Does not Describe Me Well</td>
                    <td align="center">
                        <input type="range" id={{ item.0 }} value="3" min="1" max="5" step="1" class="slider" />
                    </td>
                    <td align="left">Describes me Very Well</td>
                </tr>
                <tr>
                   <td colspan="3">&nbsp;</td>
                </tr>
            {% endfor %}
        </table>

        <p align="right">
            <button type="button" onclick="process()">Next Page</button>
        </p>
    </div>
</div>

{% endblock %}

{% block scripts %}
    <script>
        function process(){
            pt_1  = parseInt(document.getElementById("id_pt_1").value)
            pt_2  = parseInt(document.getElementById("id_pt_2").value)
            pt_3  = parseInt(document.getElementById("id_pt_3").value)
            pt_4  = parseInt(document.getElementById("id_pt_4").value)
            pt_5  = parseInt(document.getElementById("id_pt_5").value)
            pt_6  = parseInt(document.getElementById("id_pt_6").value)
            pt_7  = parseInt(document.getElementById("id_pt_7").value)

            pt_raw = ((6 - pt_1) + pt_2 + pt_3 + (6 - pt_4) + pt_5 + pt_6 + pt_7) / 7
            pt_score = (pt_raw - 1) / 4

            document.getElementById("id_empathy").value = pt_score
            document.getElementById("form").submit()
        }
    </script>
{% endblock %}