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

{% block title %}
   Pre-Exercise Survey
{% endblock %}

{% block content %}
<div class="card bg-light">
    <div class="card-body">
        <input type="hidden" name="risk" id="id_risk" value="0.0"/>
        <p align="justify">
            <b>Directions: </b>The following statements measure your underlying risk preference. Please indicate your
            feelings towards each of these by moving the slider towards the assessment you agree with.
        </p>
        <br/>
        <table align="center" cellpadding="10">
            <!-- Question 1 -->
            <tr>
                <td colspan="12">
                    Some people say you should be cautious about making major changes in life. Others say that you will
                    never achieve much in life unless you act boldly. And others have views in between. Where would you
                    place yourself on this scale?
                </td>
            </tr>
            <tr>
                <td align="right">Act Cautiously</td>
                <td align="center">
                    <input type="range" name="risk_1" id="id_risk_1" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Act Boldly</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 2 -->
            <tr>
                <td colspan="12">
                    Suppose you were playing on a slot machine and were a big winner on your third or fourth try. Would
                    you be more likely to continue playing or take your winnings?
                </td>
            </tr>
            <tr>
                <td align="right">Take My Winnings</td>
                <td align="center">
                    <input type="range" name="risk_2" id="id_risk_2" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Continue Playing</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 3 -->
            <tr>
                <td colspan="12"> In general, how easy or difficult is it for you to accept taking risks?</td>
            </tr>
            <tr>
                <td align="right">Very Difficult</td>
                <td align="center">
                    <input type="range" name="risk_3" id="id_risk_3" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Very Easy</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 4 --><tr>
                <td colspan="12">I like to do frightening things.</td>
            </tr>
            <tr>
                <td align="right">Strongly Disagree</td>
                <td align="center">
                    <input type="range" name="risk_4" id="id_risk_4" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Strongly Agree</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 5 --><tr>
                <td colspan="12">I prefer friends who are exciting and unpredictable.</td>
            </tr>
            <tr>
                <td align="right">Strongly Disagree</td>
                <td align="center">
                    <input type="range" name="risk_5" id="id_risk_5" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Strongly Agree</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 6 --><tr>
                <td colspan="12">I would like to explore strange places.</td>
            </tr>
            <tr>
                <td align="right">Strongly Disagree</td>
                <td align="center">
                    <input type="range" name="risk_6" id="id_risk_6" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Strongly Agree</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
            <!-- Question 7 --><tr>
                <td colspan="12">I like new and exciting experiences, even if I have to break the rules.</td>
            </tr>
            <tr>
                <td align="right">Strongly Disagree</td>
                <td align="center">
                    <input type="range" name="risk_7" id="id_risk_7" value="4" min="1" max="7" step="1" class="slider" />
                </td>
                <td align="left">Strongly Agree</td>
            </tr>
            <tr>
               <td colspan="3">&nbsp;</td>
            </tr>
        </table>

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

{% endblock %}

{% block scripts %}
    <script>
        function process(){
            val_1  = parseInt(document.getElementById("id_risk_1").value)
            val_2  = parseInt(document.getElementById("id_risk_2").value)
            val_3  = parseInt(document.getElementById("id_risk_3").value)
            val_4  = parseInt(document.getElementById("id_risk_4").value)
            val_5  = parseInt(document.getElementById("id_risk_5").value)
            val_6  = parseInt(document.getElementById("id_risk_6").value)
            val_7  = parseInt(document.getElementById("id_risk_7").value)

            avg_val = (val_1 + val_2 + val_3 + val_4 + val_5 + val_6 + val_7) / 7
            risk = (avg_val - 1) / 6
            document.getElementById("id_risk").value = risk
            document.getElementById("form").submit()
        }
    </script>
{% endblock %}