{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block scripts %}
    <script type="text/javascript">
        window.onload = function () 
        {
            document.getElementById("arrive_time").value = (new Date()).toISOString()
        }

        s7_update = function()
        {
            var sv = document.getElementById('s7').value
            document.getElementById('s7_val').innerHTML = sv
        }

        sval_update = function(left, right, slider)
        {
            var sv = document.getElementById(slider).value
            document.getElementById(right).innerHTML = sv
            document.getElementById(left).innerHTML = 10 - sv
        }

        document.getElementById('submit').onclick = function()
        {
            var s9a = document.getElementById('s9_left').innerHTML
            document.getElementById('s9a').value = parseInt(s9a)

            var s9b = document.getElementById('s9_right').innerHTML
            document.getElementById('s9b').value = parseInt(s9b)

            var s10a = document.getElementById('s10_left').innerHTML
            document.getElementById('s10a').value = parseInt(s10a)

            var s10b = document.getElementById('s10_right').innerHTML
            document.getElementById('s10b').value = parseInt(s10b)

            var s11a = document.getElementById('s11_left').innerHTML
            document.getElementById('s11a').value = parseInt(s11a)

            var s11b = document.getElementById('s11_right').innerHTML
            document.getElementById('s11b').value = parseInt(s11b)
        }
    </script>
{% endblock %}

{% block styles %}
    <style>
        .slider
        {
            -webkit-appearance: none;
            width: 100%;
            outline: none;
            background: lightgray;
            height: 7px;
            border-radius: 5px;
        }
        /*.slider::-webkit-slider-thumb
        {
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            background: #419bf9;
            cursor: pointer;
        }*/
        .slider-val
        {
            border-style: solid;
            border-width: 1px;
            border-color: #419bf9;
            border-radius: 4px;

            text-align: center;
        }
    </style>
{% endblock %}

{% block title %}
<font color=#4b82c1>Survey</font>
{% endblock %}

{% block content %}
    <div>
        <input type="hidden" name="time_Survey" id="arrive_time"/>
        <input type="hidden" name="s9a" id="s9a">
        <input type="hidden" name="s9b" id="s9b">
        <input type="hidden" name="s10a" id="s10a">
        <input type="hidden" name="s10b" id="s10b">
        <input type="hidden" name="s11a" id="s11a">
        <input type="hidden" name="s11b" id="s11b">
    </div>
    <div>
        <div>
            <h5>
                The information you enter in this survey will be kept strictly confidential
                and will not be linked to your identity.
            </h5>
        </div>
        <div>
            <p>
                1(a). What is your gender?
            </p>
            {% formfield player.s1 label=None %}
        </div>
        <div>
            <p>
                1(b). What is your age?
            </p>
            {% formfield player.s2 label=None %}
        </div>
	<div>
            <p>
                1(c). What is the zip code of your permanent address?
            </p>
            {% formfield player.s3 label=None %}
        </div>
        <div>
            <p>
                2(a). What is your field of study?
            </p>
            {% formfield player.s4 label=None %}
        </div>
	<div>
            <p class="question">2(b). Are you working now?</p>
            {% formfield player.s6 label=None %}
        </div>
        <div>
            <p class="question">3(a). Have you donated to charities in the past year?</p>
            {% formfield player.s5 label=None %}
        </div>
        <div>
            <p>
                3(b). On a scale from 1 to 10, with 1 being the lowest and 10 being the highest, how much do you care about the missions of the charity of your choice?
            </p>
            <div class="row">
                <div class="col-6">
                    <input id="s7" class="slider" type="range" min="1" max="10" name="s7"
                        value="{{ s7_initial }}" oninput="s7_update()">
                    <div class="row">
                        <div class="col-6">
                            <p style="text-align: left;">
                                1
                            </p>
                        </div>
                        <div class="col-6">
                            <p style="text-align: right;">
                                10
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-1">
                    <p id="s7_val" class="slider-val">
                        {{ s7_initial }}
                    </p>
                </div>
            </div>
        </div>


	<div>
            <p class="question">4(a). How often do you use Facebook?</p>
            {% formfield player.s12 label=None %}
        </div>
        <div>
            <p>
                4(b). What do you usually use Facebook to do?
            </p>
            {% formfield player.s13 label=None %}
        </div>
	<div>
	    <p>
                5(a). Why did you choose to donate or not donate in your Public donation with 0% Rebate decision?
            </p>
            {% formfield player.s16 label=None %}
	</div>
	<div>
            <p>
            	5(b). Suppose you have $50, and you are in the Public with 0% Rebate case,
		    would you like to donate any to the charity of your choice? (Enter number between 0 and 50)
	    </p>
            {% formfield player.s17 label=None %}
        </div>
        <div>
            <p class="question">6. What do you think is the impact of publicly announcing the rebate you received from your donations?
            </p>
            {% formfield player.s14 label=None %}
        </div>

	<div>
	    <p>7. Suppose you donated $10 to American Red Cross with a 50% rebate from LEEPS lab. This $10 donation is equivalent to you 
		contributing $5 and LEEPS lab contributing $5 (also called a 1:1 matching). 
		Rank the following message from your most preferred (1) to least preferred (3) way of publicly announcing your donations.
		<ul>
		    <li>{% formfield player.s15a %} 
			<!-- "Thank you, 'your name', for donating $10 to ARC!" -->
		    </li>
		    <li>{% formfield player.s15b %} 
			<!-- "Thank you, 'your name', for donating $10 to ARC, with the LEEPS Lab offering
			a $5 rebate to you!" -->
		    </li>
		    <li>{% formfield player.s15c %}
			<!-- "Thank you, 'your name', for donating $5 to ARC, with the LEEPS Lab matching $5. 
			ARC received $10 total in donations! -->
		     </li>
		</ul>
		
	    </p>
	</div>

        {% if pub_90_don != 0 %}
            <div>
                <p class="question">8. Which situation would you prefer?</p>
                {% formfield player.s8 label=None %}
            </div>
        {% endif %}

        <div>
            <p>
                {{ q9 }}. Your friend Alex donated $20 with a 10% rebate. Do you think <b>Alex is donating because they care about:</b>
            </p>

            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="col-6">
                            <p style="text-align: left;">
                                the charity and its mission
                            </p>
                        </div>
                        <div class="col-6">
                            <p style="text-align: right;">
                                the rebate
                            </p>
                        </div>
                    </div>
                    <input id="s9" class="slider" type="range" min="0" max="10"
                        value="{{ s9_r }}" oninput="sval_update('s9_left', 's9_right', 's9')">
                    <div class="row">
                        <div class="col-6">
                            <p id="s9_left" style="text-align: left;">
                                {{ s9_l }}
                            </p>
                        </div>
                        <div class="col-6">
                            <p id="s9_right" style="text-align: right;">
                                {{ s9_r }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <p>
            	{{ q10 }}. Your friend Alex donated $20 with a 50% rebate. Do you think <b>Alex is donating because they care about:</b>
	    </p>
            
            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="col-6">
                            <p style="text-align: left;">
                                the charity and its mission
                            </p>
                        </div>
                        <div class="col-6">
                            <p style="text-align: right;">
                                the rebate
                            </p>
                        </div>
                    </div>
                    <input id="s10" class="slider" type="range" min="0" max="10"
                        value="{{ s10_r }}" oninput="sval_update('s10_left', 's10_right', 's10')">
                    <div class="row">
                        <div class="col-6">
                            <p id="s10_left" style="text-align: left;">
                                {{ s10_l }}
                            </p>
                        </div>
                        <div class="col-6">
                            <p id="s10_right" style="text-align: right;">
                                {{ s10_r }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <p>
            	{{ q11 }}. Your friend Alex donated $20 with a 90% rebate. Do you think <b>Alex is donating because they care about:</b>
	    </p>

            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="col-6">
                            <p style="text-align: left;">
                                the charity and its mission
                            </p>
                        </div>
                        <div class="col-6">
                            <p style="text-align: right;">
                                the rebate
                            </p>
                        </div>
                    </div>
                    <input id="s11" class="slider" type="range" min="0" max="10"
                        value="{{ s11_r }}" oninput="sval_update('s11_left', 's11_right', 's11')">
                    <div class="row">
                        <div class="col-6">
                            <p id="s11_left" style="text-align: left;">
                                {{ s11_l }}
                            </p>
                        </div>
                        <div class="col-6">
                            <p id="s11_right" style="text-align: right;">
                                {{ s11_r }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	

    <div>
        <button id="submit" class="btn btn-primary btn-large next-button" style="float: left;">Submit</button>
    </div>

    <!-- <script type="text/javascript">
    $(document).ready(function() 
    {
        $('.next-button').click(function()
        {
            
        })
    })
    </script> -->

{% endblock %}