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

{% comment %}
    <!--
        Principal maintainer: Eli Pandolfo <epandolf@ucsc.edu>
        Contributors: Rachel Zhang <rzhang37@ucsc.edu>
    -->
{% endcomment %}

{% block title %}
    <h1>
        <font color=#4b82c1>Instructions on Decision-Making Periods</font>
    </h1>
{% endblock %}

{% block styles %}
   
{% endblock %}

{% block scripts %}
    <script type="text/javascript">

        var toggle = true

        check_answers = function()
        {

            var a3 = document.getElementById('choice3')
            var a5 = document.getElementById('choice5')

            toggle = true

            if (!a3.checked)
            {
                var i1 = document.getElementById('incorrect1')
                i1.innerHTML = "Please try again"
                toggle = false
            }
            else
                document.getElementById('incorrect1').innerHTML = ""

            if (!a5.checked)
            {
                var i2 = document.getElementById('incorrect2')
                i2.innerHTML = "Please try again"
                toggle = false
            }
            else
                document.getElementById('incorrect2').innerHTML = ""

        }

        window.onload = function() 
        {
            document.getElementById("arrive_time").value = (new Date()).toISOString()
        }
    </script>
{% endblock %}

{% block content %}
    
    <input type="hidden" name="time_ModeInstructionsCQ" id="arrive_time"/>

    <p>
        The upcoming decision-making part of the experiment has {{ Constants.num_rounds }} independent decisions. 
	Your money and donation from one decision will not impact or transfer to the next. 
	After you are done with all {{ Constants.num_rounds }} decisions, the computer will <b>randomly</b> choose <b>1</b> decision to implement it. 
    </p>
    <p>
	At the beginning of each decision, your cash account will refresh to its <b>original balance</b> of
        ${{ Constants.participation_fee }} participation fee+ ${{ player.endowment }} income from the square counting task.
        You will have the opportunity to donate some amount to a charity organization, but donations are not mandatory.
    </p>
    <p>
	The scenarios you may encounter during your decision-making periods include:
	<ul>
	    <li>
		<b><font color=#4b82c1>Public</font></b> or <b><font color=#4b82c1>Private</font></b> Donations: 
			Your donation information may be posted on LEEPS Facebook page (visible to everyone) or on your computer screen (only visible to you).
	    </li>
	    <li>
               <b> <font color=#4b82c1>Different Rebates</font></b>: The LEEPS Lab may offer you different rebate amounts on your donations.
            </li>
	</ul>
    </p>
    <p>
	Before you make each decision, please <b>pay attention</b> to:
	<ul>
	    <li>
		Whether donation is public or private, and the rebate you receive.
	    </li>
	    <li>
		What information about your donation will be posted on Facebook.
	    </li>
	</ul>
	Make each decision carefully as you <b>cannot go back to change your previous decisions</b>, and each decision has an equal probability 
		to be implemented.
    </p>

    <p>
	Here is an example of your upcoming decision page, please read instructions carefully before proceeding to the real decisions.
	<img src="{% static "examplepage.jpg" %}" width=900 align="center">
    </p>
 
    <hr>

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

    <script type="text/javascript">
    $(document).ready(function() 
    {
        $('.next-button').click(function()
        {
            check_answers()
            return toggle
        })
    })
    </script>
{% endblock %}