{% block title %}
Experimental Instructions
{% endblock %}

{% block content %}


        <p>
            Row {{ randomrow_example }} was selected.
        </p>
        {{ if example_choice == "L" }}
        <p>
            Your choice in row {{ randomrow_example }} is extra {{Constants.extra_money_example}} dollars as shown below.
        Therefore, if the task was not an example and was selected for payment, your payment will be
         {{ example_payment_c }} pieces of chocolate and {{ example_payment_m}} dollars. Specifically,
        {{Constants.y0_example}} out of {{ example_payment_m}} dollars are from the initial payment,
        the other {{Constants.extra_money_example}} dollars are from the extra payment you choose in row {{ randomrow_example }}.
        </p>

        <br><br>

        <font size = "2">
        <p>
        If this task is the one that has been selected for payment, you will be given {{Constants.x0_example}} pieces of chocolate
        and {{Constants.y0_example}} dollars.
        <br> <br> In addition, you are offered to choose one of the two extra payments.
        <ul>
            <li> In option A, you can get extra {{Constants.extra_money_example}} dollars. </li>
            <li> Option B contains some extra chocolates as shown in each row in the table below. </li>
        </ul>
        <br> Option A are preselected in all the rows. You can change to option B in any rows as you want.

        <br><br>One of the row has been selected randomly by computer. If this task is the one that has been selected for payment, your payment will be {{Constants.x0_example}} pieces of chocolate
        and {{Constants.y0_example}} dollars plus the extra payment option you choose in the row.
        Since you do not know which row will be selected for extra payment, you should choose for each row as if it were the one row chosen for extra payment.

        <br><br>To make your choices, simply click on your choice for each row. Note that the quantity of chocolates is ascending in the rows.
        So if you pick option A in row 3, you should also pick option A in row 1 and row 2. And if you pick option B in row 7, you should still pick it in row 8, row 9, and row 10.
        The interface below is implemented to automatically make these selections for you.

        <br><br>
        Please note that the chocolate flavor in the graph below are just example. You can choose different flavors as your want in the payment stage.
        <br>

        <img src="{{ static 'incomplete_preference/ExampleMPL.png' }}" style="width: 750px" align="middle"/>

        </p>

        <table class="table table-striped">
            <colgroup>
                <col width="4%">
                <col width="42%">
                <col width="14%">
                <col width="42%">
            </colgroup>
            <tr>
                <td align = "middle"><b>Row Number</b> </td>
                <td align="right"><b>Choose Option A</b></td>
                <td></td>
                <td align="left"><b>Choose Option B</b></td>
            </tr>
                <tr>
                <td align = "middle"> {{ randomrow_example }} </td>
                <td align="right">
                   Option A: extra {{Constants.extra_money_example}} dollars
                <td align="middle">
                    <input type="radio"
                           value="left"
                           name="egx_1_{{ randomrow_example }}"
                           checked
                           disabled
                           required >
                    <input type="radio"
                           name="egx_1_{{ randomrow_example }}"
                           value="right"
                           data-amount="{{ randomrow_example }}"
                           disabled
                           required>
                </td>
                <td align="left">
                    Option B: extra {{ randomrow_example }} pieces of chocolate
            </tr>
        </table>

        </font>

        {{ endif }}

        {{ if example_choice == "R" }}
        <p>
            Your choice in row {{ randomrow_example }} is extra {{ randomrow_example }} pieces of chocolates as shown below.
        Therefore, if the task was not an example and was selected for payment, your payment will be
        {{ example_payment_m}} dollars and {{ example_payment_c }} pieces of chocolate. Specifically,
        {{Constants.x0_example}} out of {{ example_payment_c }} pieces of chocolate are from
        the initial payment. The other  {{ randomrow_example }} pieces of chocolate are from the extra payment you
        choose in row {{ randomrow_example }}.
        </p>
        <br><br>
        <font size = "2">
        <p>
        If this task is the one that has been selected for payment, you will be given {{Constants.x0_example}} pieces of chocolate
        and {{Constants.y0_example}} dollars.

        <br> <br> In addition, you are offered to choose one of the two extra payments.

        <ul>
            <li> In option A, you can get extra {{Constants.extra_money_example}} dollars. </li>
            <li> Option B contains some extra chocolates as shown in each row in the table below. </li>
        </ul>
        <br> Option A are preselected in all the rows. You can change to option B in any rows as you want.

        <br><br>One of the row has been selected randomly by computer. If this task is the one that has been selected for payment, your payment will be {{Constants.x0_example}} pieces of chocolate
        and {{Constants.y0_example}} dollars plus the extra payment option you choose in the row.
        Since you do not know which row will be selected for extra payment, you should choose for each row as if it were the one row chosen for extra payment.

        <br><br>To make your choices, simply click on your choice for each row. Note that the quantity of chocolates is ascending in the rows.
        So if you pick option A in row 3, you should also pick option A in row 1 and row 2. And if you pick option B in row 7, you should still pick it in row 8, row 9, and row 10.
        The interface below is implemented to automatically make these selections for you.

        <br><br>
        Please note that the chocolate flavor in the graph below are just example. You can choose different flavors as your want in the payment stage.
        <br>

        <img src="{{ static 'incomplete_preference/ExampleMPL.png' }}" style="width: 750px" align="middle"/>
        </p>




    `    <table class="table table-striped">
            <colgroup>
                <col width="4%">
                <col width="42%">
                <col width="14%">
                <col width="42%">
            </colgroup>
            <tr>
                <td align = "middle"><b>Row Number</b> </td>
                <td align="right"><b>Choose Option A</b></td>
                <td></td>
                <td align="left"><b>Choose Option B</b></td>
            </tr>
                <tr>
                <td align = "middle"> {{ randomrow_example }} </td>
                <td align="right">
                   Option A: extra {{Constants.extra_money_example}} dollars
                <td align="middle">
                    <input type="radio"
                           value="left"
                           name="egx_1_{{ randomrow_example }}"
                           disabled
                           required >
                    <input type="radio"
                           name="egx_1_{{ randomrow_example }}"
                           value="right"
                           data-amount="{{ randomrow_example }}"
                           checked
                           disabled
                           required>
                </td>
                <td align="left">
                    Option B: extra {{ randomrow_example }} pieces of chocolate
            </tr>
        </table>`
        </font>

        {{ endif }}


{{ next_button }}



{{ endblock }}