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

<style>

div.remind {
  border: 3px dashed blue;
  text-align: center;
}
div.opt1 {
  border: 2px solid black;
  text-align: center;
}

div.opt2 {
  border: 2px solid black;
  text-align: center;
}

ul { display: inline-block; text-align: left; }



</style>


{% block title %}
    Choose a task-list pair (Version {{ version_for_template }})
{% endblock %}

{% block content %}

<div class = "remind">
    <h3>Reminder</h3>

<p> In this stage of the experiment, you need to select a task-list pair. <br>
    There is a <b>1 in 3</b> (approximately 33%) chance  that you will have to complete the task-list pair you choose on this page. <br>
    Please think carefully about your choice, as it could <b>significantly affect</b> the time it takes for you to complete the experiment.
</p>
</div>

<br>

<p>
    You must pick one of the following options:
</p>


<div class = "opt1">
    <h4>Option 1</h4>
<p>
    Complete the <strong>{{Good_Task}} (level 1)</strong> task. <br>
    After completing the <strong>{{Good_Task}} (level 1)</strong> task, you must complete <strong>one</strong> of the following tasks:
</p>
    <ul>
        <li>{{remaining_tasks.0}} (level 1)</li>
        <li>{{remaining_tasks.1}} (level 1)</li>
        <li>{{remaining_tasks.2}} (level 1)</li>
    </ul>
</div>

<br>
<div class = "opt2">
    <h4>Option 2</h4>
<p>
    Complete the <strong>{{Bad_Task}} (level 1)</strong> task. <br>
    After completing the <strong>{{Bad_Task}} (level 1)</strong> task, you must complete <strong>one</strong> of the following tasks:
</p>
    <ul>
        <li>{{remaining_tasks.0}} (level 1)</li>
        <li>{{remaining_tasks.1}} (level 1)</li>
        <li>{{remaining_tasks.2}} (level 1)</li>
    </ul>
</div>

<br>
<p>
</p>
    {% formfield player.Blunder_Task_Choice label="Please select one of the above options"
%}



    {% next_button %}

<details>
    <summary>Click here if you'd like to see the task descriptions.</summary>
    {{ include 'RET_Choice/Task_Descriptions.html'}}

</details>


{% endblock %}