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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'Risk/css/custom.css' %}" rel="stylesheet"/>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    Task 1 – Quiz
{% endblock %}

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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
    <style>
    #customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 80%;
    }

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

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

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

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
    <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;
               }
            });
        });

    </script>

{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
    <div class="instructions">
        <p>
            Please consider the choice table below. Then answer the two questions at the bottom of the page.
        </p>
        </p>
        <table align="center" id="customers" >

                <col width="150">
                <col width="30">
                <col width="30">
                <col width="150">

                <thead>
                    <tr align="center">
                        <th> {% trans "Option A" %} </th>
                        <th colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid #808080;">
                                       {% trans "Your Choice" %}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: #808080; border: 1px solid #808080;">
                                       A
                                    </td>
                                    <td style="background-color: #808080; border: 1px solid #808080;">
                                       B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th> {% trans "Option B" %}</th>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center" rowspan="8">
                            <b>€8</b> with a probability of <b>40%</b>
                            <br> or <br/>
                            <b>€2</b> with a probability of <b>60%</b>.
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€7</b> guaranteed <br/>
                        </td>
                     </tr>
                    <tr>

                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€6.50</b> guaranteed <br/>
                        </td>
                     </tr>
                    <tr>

                         <!-- radio select form fields -->
                       <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€6</b> guaranteed <br/>
                        </td>
                    </tr>
                    <tr>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€5.50</b> guaranteed <br/>
                        </td>
                    </tr>
                    <tr>
                        <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€5</b> guaranteed <br/>
                        </td>
                    </tr>
                    <tr>
                        <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€4.50</b> guaranteed <br/>
                        </td>
                    </tr>
                    <tr>
                        <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€4</b> guaranteed <br/>
                        </td>
                    </tr>
                    <tr>
                        <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€3.50</b> guaranteed <br/>
                        </td>
                    </tr>

                </tbody>
            </table> <br> <br>

        <p>
            <b> Question 1</b> <br>
            Suppose the computer has chosen the decision in row 2 for payment and you chose the guaranteed option (Option B) in that row
            <table align="center" id="customers" >
                <col width="180">
                <col width="60">
                <col width="180">
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center" >
                            <b>€8</b> with a probability of <b>40%</b> or <br/>
                            <b>€2</b> with a probability of <b>60%</b>.
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio" style="pointer-events: none;" >
                            <input type="radio" style="pointer-events: none;" checked="checked">
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€6.50</b> guaranteed <br/>
                        </td>
                     </tr>
                    <tr>
                </tbody>
            </table>

            {% formfield player.q1 %}
        </p>
        <p>
            <b> Question 2</b> <br>
            Suppose the computer has chosen the decision in row 8 for payment and you chose the guaranteed option (Option A) in that row
            <table align="center" id="customers" >
                <col width="180">
                <col width="60">
                <col width="180">
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center" >
                            <b>€8</b> with a probability of <b>40%</b> or <br/>
                            <b>€2</b> with a probability of <b>60%</b>.
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio" style="pointer-events: none;" checked="checked">
                            <input type="radio" style="pointer-events: none;">
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€3.50</b> guaranteed <br/>
                        </td>
                     </tr>
                    <tr>
                </tbody>
            </table>

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


    <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 1 - 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>Task</b><br>
            In our first task you will have to choose between a lottery and a guaranteed payoff.
            While the guaranteed payoff is certain, the lottery consists of two possible payoffs: a high and a low payoff.
            For each lottery, we will specify the two payoffs (low and high) together with the corresponding probabilities as illustrated in the example below.
            Note that only one of the two payoffs will materialize if you choose the lottery option.
            The probabilities indicate the chance of receiving the respective payoff.
            Sometimes it is more likely to win the high payoff, sometimes it is more likely to win the low payoff and sometimes both payoffs are equally likely (as in the example below).
        </p>
        <p align="center">
            <u>Lottery Example: </u>  </br>
            <i> Receive either <b> 12€ </b> with a probability of <b> 50% </b> <br>
            or <b> 4€ </b> with a probability <b> 50% </b>.</i>

        </p>
        <p>
            You will be presented with 12 choice tables, all of which contain multiple rows.
            For each row, choose one of two alternatives: either the lottery (Option A) or the guaranteed payoff (Option B). <br>
            As you can see in Figure 1, the lottery option (Option A) will be constant throughout the entire list.
            However, the guaranteed payoff will decrease from row to row.
            It starts out being relatively attractive, but then decreases in attractiveness as you move down the list.
            Therefore, people usually prefer the guaranteed payoff (Option B) in the first row, but then switch to the lottery (Option A) at some row further down in the table.
            Please note, however, that our questions are not designed to test you.
            There exist no incorrect answers or incorrect switching points.
            For some tables it might feel more natural to switch rather early, while for other tables you may want to switch rather late.
            You might even feel that you don't want to switch at all. For every row in the choice table, simply choose the option that you prefer more. <br>
            Our computer is programmed such that once you switch from he guaranteed payoff (Option B) to the lottery (Option A),
            it will automatically mark all remaining rows as lottery choices. This implies that you can switch at most one time per table.
        </p>
        <table align="center" id="customers">

                <col width="150">
                <col width="30">
                <col width="30">
                <col width="150">

                <thead>
                    <tr align="center">
                        <th> {% trans "Option A" %} </th>
                        <th colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid #808080;">
                                       {% trans "Your Choice" %}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: #808080; border: 1px solid #808080;">
                                       A
                                    </td>
                                    <td style="background-color: #808080; border: 1px solid #808080;">
                                       B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th> {% trans "Option B" %}</th>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center" rowspan="3">
                            <b>€12</b> with a probability of <b>50%</b> or  <br/>
                            <b>€4</b> with a probability of <b>50%</b>.
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€12</b> guaranteed<br/>
                        </td>
                     </tr>
                    <tr>
                        <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€9</b> guaranteed<br/>
                        </td>
                     </tr>
                    <tr>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  checked>
                        </td>
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€6</b> guaranteed<br/>
                        </td>
                     </tr>
                </tbody>
            </table>
        <p align="center"><i> Figure 1 - Example of choice table. </i></p>
        <p>
            As mentioned above, you will walk through 12 choice tables in this first part.
            Once you click the NEXT button, your choices on the current page will be recorded and you will not be able to revise them.
            You will not have the opportunity to navigate back during this task. So please think carefully before you leave a page.
        </p>
        <p>
        <b>Payoff</b><br>
            Your payoffs in this task will be paid today, right after the experiment, by transfer to your PayPal account.
            Once you have completed all choice tables, the computer will randomly draw one of the decisions you have made in this task for payoff.
            If in that decision you have chosen the guaranteed payoff (Option B), you will receive that payoff.
            However, if you have chosen the lottery (Option A), we will first resolve the lottery and determine its outcome.
            That is, you will be paid either the low or the high payoff.
            The lotteries will be resolved at the end of the study, which means that you will learn about your earnings in this task at the end of this study as well.
        </p>
        <p>
            <b>Example</b><br>
            Suppose the computer has randomly drawn row 3 from figure 1 for payment and you have chosen the lottery (Option A) in that decision.
            Further, suppose the lottery was resolved and by chance the high outcome was determined for payment.
            Then you would receive €12 for this task at the end of our study.
        </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>

{% endblock %}


{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}

{# ********************************************************* #}
{# *** Disable mouse and keyboard scrolling for input variables *** #}
{# ********************************************************* #}
<script>
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

$(document).ready(function() {
$("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
        if (event.keyCode === 38 || event.keyCode === 40) {
            event.preventDefault();
        }
     });
   });
});
</script>

{% endblock %}