{% 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="attention" id="id_attention" value="0.0"/>
        <input type="hidden" name="world" id="id_world" value="0.0"/>
        <p align="justify">
            <b>Directions: </b>The following statements measure your political beliefs. Please indicate your feelings
            towards each of these by moving the slider in the direction of the assessment you most agree with.
        </p>
        <br/>
        <table align="center" cellpadding="10">
            {% for item in cimi %}
                <tr>
                    <td colspan="12">
                        {{ item.1 }}
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Completely Disagree
                    </td>
                    <td align="center">
                           <input type="range" id={{ item.0 }} value="4" min="1" max="7" step="1" class="slider" />
                    </td>
                    <td align="left">
                        Completely Agree
                    </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(){
            cop_1  = parseInt(document.getElementById("id_cop_1").value)
            cop_2  = parseInt(document.getElementById("id_cop_2").value)
            cop_3  = parseInt(document.getElementById("id_cop_3").value)
            mil_1  = parseInt(document.getElementById("id_mil_1").value)
            mil_2  = parseInt(document.getElementById("id_mil_2").value)
            mil_3  = parseInt(document.getElementById("id_mil_3").value)
            neu_1  = parseInt(document.getElementById("id_neu_1").value)
            neu_2  = parseInt(document.getElementById("id_neu_2").value)
            neu_3  = parseInt(document.getElementById("id_neu_3").value)
            att = parseInt(document.getElementById("id_att").value)

            cop_raw = (cop_1 + cop_2 + cop_3) / 3
            mil_raw = (mil_1 + mil_2 + mil_3) / 3
            neu_raw = (neu_1 + (8 - neu_2) + neu_3) / 3

            world_score = (cop_raw - mil_raw) / neu_raw

            document.getElementById("id_attention").value = att
            document.getElementById("id_world").value = world_score

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