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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'Time_Adaptive_CE/css/custom.css' %}" rel="stylesheet">
<style>
    .customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 14px;
      border-collapse: collapse;
      width: 100%;
    }

    .customers td {
      border: 1px solid lightgrey;
      padding: 8px;
      font-size: 14px;
    }

    .customers tr:nth-child(even){background-color: #f2f2f2;}

    .customers tr{
    line-height: 18px;
    }

    .customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: center;
      background-color: #F0F0F0;
      color: black;
      border: 1px solid #F0F0F0;
      border-bottom-color: lightgrey;
    }

    .nav {
    visibility: hidden;
    }
</style>
<style>
    #modal {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 78%;
    }

    #modal td, #modal th {
      border: 1px solid grey;
      padding: 8px;
    }

    #modal tr:nth-child(even){background-color: #f2f2f2;}

    #modal th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: center;
      background-color: #808080;
      color: white;
                    }
 </style>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
<script src="{% static 'Time_Adaptive_CE/js/buttons.js' %}"></script>
<script type="text/javascript">
    // Pressing enter does not submit the form.
    $(document).ready(function() {
        $(window).keydown(function(event){
            if ((event.keyCode == 13) || (event.keyCode == 32)){
            event.preventDefault();
            return false;
           }
        });
    });

    // Disable right click
    $(document).ready(function(){
        document.oncontextmenu = function() {return false;};
        $(document).mousedown(function(e){
            if( e.button == 2 ) {
                //window.location.reload();
                return false;
            }
            return true;
        });
    });

</script>

{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}

{% block title %}

{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">

    <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1
    </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()"> Tab 2</a>
    </li>

</ul>
<script>
    d = new Date();
    d_28 = new Date(d.setDate(d.getDate() + 28));

    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    var weekday_28 = weekday[d_28.getDay()];
    var month_28 = month[d_28.getMonth()];

    var date_28 = weekday_28 + ", "  + d_28.getDate() + ". " + month_28 + " " + d_28.getFullYear();
</script>

<script>
document.addEventListener('DOMContentLoaded', function(){
  var el = document.getElementById('date_28');
  if (el) { el.textContent = date_28; }
});
</script>

<div class="tab-content" id="myTabContent">
    {# ********************************* #}
    {# *** Seite 1 *** #}
    {# ********************************* #}
    <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab" align="center" style="width: 1100px">
        <div class="card-header bg-transparent mainheader" align="center">
            <h3 class="card-title font-weight-bold" style="font-size: 18pt">
                Quiz
            </h3>
        </div>

        <div class="instructions" align="justify">
            <br>
        <p align="center">
            Please consider the choice example below. Then answer the two questions at the bottom of the page.
        </p>

        <div align="center" style="font-size: 16px">
            <b>Which lottery do you prefer?</b>
        </div>
        <table align="center" class="customers" style="width: 80%" >

                <col width="200">
                <col width="20">
                <col width="200">

                <thead>
                    <tr>
                        <th align="center" style="font-size: 16px" height="50px">
                             The Alternative – <span style="color: #F39F18"><b>Tomorrow</b></span>
                        </th>
                        <th align="center" style="font-size: 16px" height="50px">
                            or
                        </th>
                        <th align="center" style="font-size: 16px">
                            The Alternative – <span style="color: #CB99D9"><b>4 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center">
                            which pays
                            <br> <br>
                            €4.10 <b><span style="color: #F39F18">tomorrow</span></b>.
                            <br> <br>
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  checked="checked">
                            <input type="radio" disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            which pays
                            <br> <br>
                            €7.20 <b><span style="color: #CB99D9">in 4 weeks</span></b>.
                            <br> <br>
                        </td>
                     </tr>
                </tbody>
            </table>
            <br>
            <div align="justify">
            1. Let’s assume you have chosen the Alternative - <span style="color: #CB99D9"><b>Tomorrow</b></span> in the example above.
                Further assume this example choice was selected for payment.
               {% formfield player.q1a %}

                {% formfield player.q1b %}

                {% formfield player.q2 %}
            </div>

        </div>

    </div>

{# Buttons #}
    <div align="center">
        <!-- Instructions Button -->
        <button name="Next" value="True" class="btn btn-primary btn-large">Next</button>
        <button type="button" align="center" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#InstructionsModal" style="background-color:grey; border-color:grey">Instructions </button>
    </div>

        <!-- Instructions Modal -->
        <div class="modal fade" id="InstructionsModal" tabindex="-1" role="dialog" aria-labelledby="InstructionsModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" style="max-width: 80%; font-size: 14px" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="InstructionsModalLabel"> Part 2 - Instructions </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <style>
                        #modal {
                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                          border-collapse: collapse;
                          width: 78%;
                        }

                        #modal td, #modal th {
                          border: 1px solid grey;
                          padding: 8px;
                        }

                        #modal tr:nth-child(even){background-color: #f2f2f2;}

                        #modal th {
                          padding-top: 12px;
                          padding-bottom: 12px;
                          text-align: center;
                          background-color: #808080;
                          color: white;
                        }
                     </style>

                <p>
                <p>
             <p>
        <p>
                <div class="instructions" align="justify">
            {% if discount_seq == 2%}
            <p>
                The next part of this study will consist of two tasks.
                We will start by explaining the first task.
                Once you have completed the first task, we will explain task 2.
            </p>

            <p>
                <b>Part 2 - Task 1</b> <br>
                In the first task you will have to choose between different monetary alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the monetary value is usually low.
                The second alternative, which we refer to as the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span> will be paid out in 4 weeks (i.e., <span id="date_28"></span>).
                Since this alternative will be paid out "later", the monetary value is usually higher.
                The example below illustrates this. <br>
                Your task is to choose between the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span>
                and the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span>.
            </p>
            {% endif %}

            {% if discount_seq == 1 %}
            <p>
                <b>Part 2 - Task 2</b> <br>
                In the second task you will have to choose between different monetary alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the monetary value is usually low.
                The second alternative, which we refer to as the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span> will be paid out in 4 weeks (i.e., <span id="date_28"></span>).
                Since this alternative will be paid out "later", the monetary value is usually higher.
                The example below illustrates this. <br>
                Your task is to choose between the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span>
                and the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span>.
            </p>
            {% endif %}
            <div align="center" style="font-size: 16px">
                <b> Which alternative do you prefer?</b>
            </div>

            <table class="customers" align="center" style="width: 70%">
                <colgroup>
                    <col style="width: 150px" >
                    <col style="width: 50px" >
                    <col style="width: 150px" >
                </colgroup>
                <thead>
                    <tr>
                        <th align="center" style="font-size: 16px" height="50px">
                            The Alternative – <span style="color: #F39F18"><b>Tomorrow</b></span>
                        </th>
                        <th align="center" style="font-size: 16px" height="50px">
                            or
                        </th>
                        <th align="center" style="font-size: 16px">
                            The Alternative – <span style="color: #CB99D9"><b>4 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td align="center">
                        which pays
                        <br> <br>
                        €4.00 <b><span style="color: #F39F18">tomorrow</span></b>.
                        <br> <br>
                    </td>
                    <td align="center">
                        <input type="radio" name="choice" value="A" disabled>
                        <input type="radio" name="choice" value="B" disabled>
                    </td>
                    <td align="center">
                        which pays
                         <br><br>
                        €10.00 <b><span style="color: #CB99D9">in 4 weeks</span></b>.
                        <br><br>

                    </td>
                </tr>
            </table>
            <br>
            <p>
                This task will consist of 3 rounds each containing 6 choices.
                That means that you will make a total of 18 choices similar to the example above.
                For all 18 choices the payment dates remain the same. However, the monetary amounts you can earn differ.
                Within one round, the amounts of the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> remain constant.
                They only change once you start a new round.
                The amounts of the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span>, on the other hand,
                differ from choice to choice. It is very important that you pay attention to those changes when you make your decision.
            </p>
            <p>
                At the end of this study, we will randomly select one your of choices in this part of the study (either from task 1 or from task 2)
                and pay them out at the respective date of payment (via PayPal).
                This means your choices in this first task have the same probability of being selected as your choices
                {% if discount_seq == 2 %} in task 2. {% endif %}
                {% if discount_seq == 1 %} in task 1.{% endif %}
                It is always in your best interest to choose the option you prefer the most.
            </p>
            <p>
                Please note again that the questions are not designed to test you.
                There are no correct or incorrect answers. Simply choose the payment option that you prefer the most.

                <br>

                Please think carefully about your decision before you leave a page.
                Once you click the NEXT button on the bottom of a decision page, your choices will be recorded and you will not be able to revise them.
                You will not have the opportunity to navigate back during this task.
        </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-large" style="background-color:grey; border-color:grey" data-bs-dismiss="modal">Return</button>
              </div>
            </div>
          </div>
        </div>
    </div>


{% endblock %}