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

{% block title %}
    Question 2
{% endblock %}

{% block content %}
 <div style="font-size:20px;">
    <br><br>
    Great Job!
     <br><br>
     If you found a job, the probability of getting each wage rate offers would be equally at 10% for 1 to 10.
     <br><br>
     However, your reservation wage is <strong>6</strong>, you did get a job means that the wage rate you get would be only <strong>6, 7, 8, 9, 10</strong>.
     <br><br>
     The averaged wage rate would be <strong>(6+7+8+9+10)/5 = 8</strong>
     <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>
     Which one of the following job offers <strong>would you prefer</strong> if you do not have any Unemployment Insurance benefit?
     <br><br>
     <strong>Number 1: Wage Rate at 1 Point starting at 1st round</strong>
     <br><br>
     <strong>Number 2: Wage Rate at 5 Points starting at 11th round</strong>
     <br><br>
     <strong>Number 3: Wage Rate at 7 Points starting at 13th round</strong>
     <br><br>
     <strong>Number 4: Wage Rate at 8 Points starting at 15th round</strong>
     <br><br>
     <strong>Number 5: Wage Rate at 10 Points starting at 18th round</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">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>
<!--    {% 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 %}