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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'Time_Adaptive_Lot_2/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>

{# 增加以下使得彈窗文字左對齊 #}
<style>
  /* 覆盖外层居中对 modal 的继承，把弹窗正文强制设为左对齐 */
  #InstructionsModal .modal-body,
  #InstructionsModal .modal-body p,
  #InstructionsModal .modal-body td,
  #InstructionsModal .modal-body th {
    text-align: left !important;
  }
</style>

{% endblock %}

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
<script src="{% static 'Time_Adaptive_Lot_2/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>

{# Add this script to ensure the dates under instructions button works #}
<script>
(function () {
  function computeDate28() {
    const d = new Date();
    // 更稳的 +28天（避免 DST/跨月坑）
    const d28 = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 28);
    const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    return `${weekday[d28.getDay()]}, ${d28.getDate()} ${month[d28.getMonth()]} ${d28.getFullYear()}`;
  }

  function fillDate28() {
    const text = computeDate28();
    // 同时兼容 id 和 class 的占位符
    document.querySelectorAll('#date_28, .date_28').forEach(el => { el.textContent = text; });
  }

  // A. 页面解析完成先填一次
  document.addEventListener('DOMContentLoaded', fillDate28);

  // B. modal 将要显示时再填一次（确保 modal 内部一定被填到）
  const modal = document.getElementById('InstructionsModal');
  if (modal) {
    modal.addEventListener('show.bs.modal', fillDate28); // Bootstrap 4/5 均是这个事件名
  }
})();
</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>
<!-- additional script -->
<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>

<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 Lottery - <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 Lottery - <span style="color: #CB99D9"><b>4 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                        <td align="center">
                            which pays
                            <br> <br>
                            €9.10 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows head <br>
                            ou <br>
                            €4.10 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows tail.
                            <br> <br>
                        </td>
                        <td align="center">
                            <input type="radio" name="choice" value="A" disabled>
                            <input type="radio" name="choice" value="B" checked="checked">
                        </td>
                        <td align="center">
                            which pays
                            <br> <br>
                            €12.20 in <b><span style="color: #CB99D9"><b>4 weeks</b></span></b> if the coin shows head <br>
                            or <br>
                            €6.20 in <b><span style="color: #CB99D9"><b>4 weeks</b></span></b> if the coin shows tail.
                            <br> <br>
                        </td>
                     </tr>
                </tbody>
            </table>
            <br>
            <div align="justify">
            1. Let’s assume you have chosen the Lottery - <span style="color: #CB99D9"><b>4 weeks</b></span> in the example above.
                Further assume this example choice was selected for payment and the outcome of the coin toss was tail.
               {% formfield player.q1a %}

                {% formfield player.q1b %}

                {% formfield player.q2 %}
            </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 Task 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>
                <b>Part 2 - Task 2</b> <br>
                In the second task you will have to choose between different lottery alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the two potential amounts you can earn in that lottery are usually low.
                The second alternative, which we refer to as the Lottery - <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 two potential amounts you can earn in that lottery are usually higher.
                The example below illustrates this. By comparing the outcomes of the two lotteries, you can see how both the outcome
                in the best case scenario and the outcome in the worst case scenario are higher in the Lottery - <span style="color: #CB99D9"><b>4 weeks</b></span>.<br>
                Your task is to choose between the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> and the Lottery - <span style="color: #CB99D9"><b>4 weeks</b></span>.
                Each lottery will pay you either the high or the low amount depending on the outcome of a coin toss.
                So for each amount, there exists a 50-50 chance that it will materialize.
            </p>
             <div align="center" style="font-size: 16px">
                    <b>Which is your preferred alternative</b>
                </div>

            <table align="center" class="customers" style="width: 80%">
                <colgroup>
                    <col style="width: 300px" >
                    <col style="width: 75px" >
                    <col style="width: 300px" >
                </colgroup>
                <thead>
                    <tr>
                        <th align="center" style="font-size: 16px" height="50px">
                            The Lottery - <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 Lottery  - <span style="color: #CB99D9"><b>4 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td align="center">
                        which pays
                        <br> <br>
                        €9.00 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows head <br>
                        or <br>
                        €4.00 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows tail.
                        <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>
                        €12.00 in <b><span style="color: #CB99D9"><b>4 weeks</b></span></b> if the coin shows head <br>
                        or <br>
                        €6.50 in <b><span style="color: #CB99D9"><b>4 weeks</b></span></b> if the coin shows tail.
                        <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 of the lotteries differ.
                Within one round, the amounts of the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> remain constant.
                They only change once you start a new round.
                The amounts of the Lottery - <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 second task have the same probability of being selected as your choices in task 1.
                If the computer selects one of the choices from this task, it will solve the lottery by simulating a coin toss.
                According to the outcome of the coin toss you will then either receive the higher amount if the coin shows heads or the lower amount if the coin shows tails.
                Since all of your choices have the same probability to be chosen for payment, 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.
            </p>

        <p>
            Please click the Return button if you understood the instructions and you feel ready to continue.
        </p>

              </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>

</div>


{% endblock %}