{{ extends "global/Page.html" }}
{{ block title }}
Task {{ player.round_number }}: {{ task_name }} Task
{{ endblock }}

{{ block content }}
<p>{{ instructions }}</p>
<div class="d-flex justify-content-center my-4">
    <img src="{{ static example_path }}" />
</div>
<div class="row text-center my-3 text-">
    <div class="col h5 text-primary">Low Reward: {{ low_reward }} per correct answer</div>
    <div class="col h5 text-info">High Reward: {{ high_reward }} per correct answer</div>
</div>
<p>Once you click on the button below, the task will appear and the timer will start.</p>

{{ next_button }}
{{ endblock }}

{{ block styles }}
<style>
    img {
        width: 600px;
        max-width: 100%;
        border: thin solid gray;
        border-radius: 2%;
    }
</style>
{{ endblock }}