{{ block title }}
Explanation of the scenarios
{{ endblock }}
{{ block global_styles  }}

    <link rel="stylesheet" href="{{ static 'global/style_sheet.css' }}">

{{ endblock }}
{{ block content }}

<div>
    <br>
    <p>
        In the following, we will present you two different scenarios:
    </p>

{{ if player.treatment_order == "A" }}
    <p>
<table class="likert">
    <col width="50%">
    <col width="50%">
    <tr>
        <th><h3> Scenario 1 </h3></th>
        <th><h3> Scenario 2 </h3></th>
    </tr>
    <tr>
        <td class="likert_label"><p><b>You may influence the AI prediction:</b></p>
            <p>Before the AI system predicts your risk tolerance, you can decide which of your information the AI system is allowed to use.</p></td>

        <td class="likert_label"><p><b>You cannot influence the AI prediction:</b></p>
            <p>The AI system predicts your risk tolerance based on all information you provided at the beginning.</p></td>
</table>
    </p>
{{ else }}
        <p>
<table class="likert">
    <col width="50%">
    <col width="50%">
    <tr>
        <th><h3> Scenario 1 </h3></th>
        <th><h3> Scenario 2 </h3></th>
    </tr>
    <tr>
        <td class="likert_label"><p><b>You cannot influence the AI prediction:</b></p>
            <p>The AI system predicts your risk tolerance based on all information you provided at the beginning.</p></td>
        <td class="likert_label"><p><b>You may influence the AI prediction:</b></p>
            <p>Before the AI system predicts your risk tolerance, you can decide which of your information the AI system is allowed to use.</p></td>
</table>
    </p>
{{ endif }}
    <br>

    <p>
        <b>You will go through both scenarios. Afterwards, one of the two scenarios will be implemented.
            Which one will be determined by a coinflip.</b>
    </p>

    <p>
        To start scenario 1, please click "Next"
    </p>
</div>
<br>
<button id="next_button" class="otree-btn-next btn btn-primary"> Next </button>
{{ endblock }}