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

{% block title %}
    Question 6
{% endblock %}

{% block content %}
 <div style="font-size:20px;">
     Great Job!
     <br><br>
     If you have UI benefits at 9 points for all 20 rounds, you would never accept any job offer with wage rate lower than 9 points because it will lower your payoffs.
     <br><br>
      You will proceed to the next page only after you answer the next question correctly.
        <br><br>
        (You can see instructions again here after clicking the instruction button.)
    <br><br>
   If you have Unemployment Insurance (UI) benefit at <strong>10 points for all 20 rounds</strong>, which one in the following combo <strong>would you prefer</strong> from this session?
     <br><br>
     <strong>Number 1: Reservation Wage at 1 Point and Sample Size at 5 in 1st round</strong>
     <br><br>
     <strong>Number 2: Reservation Wage at 4 Points and Sample Size at 4 in 2nd round</strong>
     <br><br>
     <strong>Number 3: Reservation Wage at 6 Points and Sample Size at 3 in 3rd round</strong>
     <br><br>
     <strong>Number 4: Reservation Wage at 8 Points and Sample Size at 2 in 4th round</strong>
     <br><br>
     <strong>Number 5: Reservation Wage at 10 Points and Sample Size at 1 in 5th round</strong>
     <br><br>
     <strong>Number 6: Reservation Wage at any Point and Sample Size at 0 in all rounds</strong>
     <br><br>
        <button class="otree-btn-next btn btn-primary" type="button">Number 1</button>
        <button class="otree-btn-next btn btn-primary" type="button">Number 2</button>
        <button class="otree-btn-next btn btn-primary" type="button">Number 3</button>
        <button class="otree-btn-next btn btn-primary" type="button">Number 4</button>
        <button class="otree-btn-next btn btn-primary" type="button">Number 5</button>
        <button class="otree-btn-next btn btn-primary">Number 6</button>
<!--    {% formfields %}-->
<!--            <button class="otree-btn-next btn btn-primary">Wage Rate</button>-->
      <br><br><br>
        <button id="btn_reminder" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collpaseExample" aria-expanded="false" aria-controls="collapseExample">
        Instruction (show/hide)
        </button>
    </div>
        <div class="collapse" id="collapseExample">
            <div style="font-size:20px;">
        <br>
        <p>
       Suppose you have just lost your job, and now you are looking for a new job. In this process, you should consider:
            <ol>
                <li>
                    <strong>The minimum wage you are willing to accept.</strong>
                </li>
                <li>
                    How much effort you would put in looking for jobs. (<strong>How many jobs you will look for.</strong>)
                </li>
            </ol>
        </p>
        You will be able to look for jobs for 20 rounds.
        <p>
            <ol>
                <li>
                    If you fail to find a job in one round, you move to the next.
                </li>
                <li>
                    <strong>Once you find the job, the job search will end.</strong>
                    <ol>
                        <li>
                            <strong>Your earnings from new job equals to the wage rate multiplied by the rest of rounds (including the current round)</strong>.
                        </li>
                    </ol>
                </li>
            </ol>
        </p>
            Let us think about what you have when looking for jobs:
        <p>
            <ol>
                <li>
                    You have some money in your account that you borrow from others. <strong>(You have to return them after finishing job search)</strong>
                </li>
                <li>
                    Looking for jobs has a cost, and the cost depends on how many jobs you are looking for.
                </li>
                <li>
                    You may have Unemployment Insurance benefit for a period of time, and the amount and duration will vary.
                    <ol>
                        <li>
                            However,<strong>you won't have Unemployment Insurance anymore if you find a new job</strong>.
                        </li>
                    </ol>
                </li>
            </ol>
        </p>
        Finally, your earned points will be converted into U.S. dollars and rounded into integer <strong>(10 points = 1 dollar)</strong>.
        <br><br>
        Any negative point will be converted into <strong>0</strong> finally.
        <br><br>
        </div>
    </div>

    <br><br>
    <table style="border-collapse: collapse; width: 100%;" border="1" class="table table-bordered">
            <tbody>
                <tr>
                    <th style="width: 22%; text-align: center;">Number of Jobs</th>
                    <td style="width: 13%; text-align: center;">0</td>
                    <td style="width: 13%; text-align: center;">1</td>
                    <td style="width: 13%; text-align: center;">2</td>
                    <td style="width: 13%; text-align: center;">3</td>
                    <td style="width: 13%; text-align: center;">4</td>
                    <td style="width: 13%; text-align: center;">5</td>
                </tr>
                <tr>
                    <th style="width: 22%; text-align: center;">Cost</th>
                    <td style="width: 13%; text-align: center;">0 point</td>
                    <td style="width: 13%; text-align: center;">2 points</td>
                    <td style="width: 13%; text-align: center;">5 points</td>
                    <td style="width: 13%; text-align: center;">10 points</td>
                    <td style="width: 13%; text-align: center;">18 points</td>
                    <td style="width: 13%; text-align: center;">30 points</td>
                </tr>
            </tbody>
        </table>



        <script>
            $('#btn_reminder').click(function() {
            $('#collapseExample').toggle();
           // $(this).html( $(this).html() == 'Show instructions' ? 'Hide instructions' : 'Show instructions' );
            });
        </script>


{% endblock %}