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

{% block global_styles  %}
<link rel="stylesheet" type="text/css" href="{% static 'global/theme.css' %}" />
{% endblock %}
{% block title %}
    Instructions Part II
{% endblock %}

{% block content %}
{% load otree_tags staticfiles %}

{% if treatment == "FreeTool" %}
<div class="card border-light">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>
    <div class="card-body">
        <p>
            In this part of the experiment, you will work on the matrices again. This time, however, you will be rewarded with<b>
            {{ Constants.matrix_rate }}</b> for each correctly solved matrix. You will have <b>{{ player.task_timer}}</b> seconds to
            work on the matrices.
        </p>
        <p>
            You can perform the task just as you did it in the trial round or you can get a free tool that will allow you to solve more matrices correctly within the allocated time.
            The tool will red-highlight incorrectly checked 'b' letters and indicate how many 'd' letters are still unchecked. Additionally, all 'd' letters will be highlighted in yellow
            which should help you solve the matrices faster. You can make your choice by clicking one of the buttons below.
        </p>

    </div>
    <div class="row">
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button name = "tool" value = 0 class="btn btn-primary" >Continue as in the trial!</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button  name = "tool" value = 1 class="align-self-left mt-auto btn btn-primary"  >Continue with the free tool!</button>
                </div>
            </div>
        </div>
    </div>
</div>

{% elif treatment == "ComplimentaryTool" %}
<div class="card border-light">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>
    <div class="card-body">
        <p>
            In this part of the experiment, you will work on the matrices again. This time, however, you will be rewarded with<b>
            {{ Constants.matrix_rate }}</b> for each correctly solved matrix. You will have <b>{{ player.task_timer}}</b> seconds to
            work on the matrices.
        </p>
        <p>
            You can perform the task just as you did it in the trial round or you can get a complimentary tool that will allow you to solve more matrices correctly within the allocated time.
            The tool will red-highlight incorrectly checked 'b' letters and indicate how many 'd' letters are still unchecked. Additionally, all 'd' letters will be highlighted in yellow
            which should help you solve the matrices faster. You can make your choice by clicking one of the buttons below.
        </p>

    </div>

    <div class="row">
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button  name = "tool" value = 0 class="btn btn-primary" > Continue as in the trial!</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button  name = "tool" value = 1 class="align-self-left mt-auto btn btn-primary" >Continue with the complimentary tool!</button>
                </div>
            </div>
        </div>
    </div>

</div>


{% elif treatment == "Tool" %}
<div class="card border-light">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>
    <div class="card-body">
        <p>
            In this part of the experiment, you will work on the matrices again. This time, however, you will be rewarded with<b>
            {{ Constants.matrix_rate }}</b> for each correctly solved matrix. You will have <b>{{ player.task_timer}}</b> seconds to
            work on the matrices.
        </p>
        <p>
            You can perform the task just as you did it in the trial round or you can get a tool that will allow you to solve more matrices correctly within the allocated time.
            The tool will red-highlight incorrectly checked 'b' letters and indicate how many 'd' letters are still unchecked. Additionally, all 'd' letters will be highlighted in yellow
            which should help you solve the matrices faster. You can make your choice by clicking one of the buttons below.
        </p>

    </div>
    <div class="row">
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button name = "tool" value = 0 class="btn btn-primary" >Continue as in the trial!</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button  name = "tool" value = 1 class="align-self-left mt-auto btn btn-primary"  >Continue with the tool!</button>
                </div>
            </div>
        </div>
    </div>
</div>


{% elif treatment == "AlternativeVersion" %}
<div class="card border-light">

    <h2 class="panel-sub-heading">

    </h2>

    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>
    <div class="card-body">
        <p>
            In this part of the experiment, you will work on the matrices again. This time, however, you will be rewarded with<b>
            {{ Constants.matrix_rate }}</b> for each correctly solved matrix. You will have <b>{{ player.task_timer}}</b> seconds to
            work on the matrices.
        </p>
        <p>
            You can perform the task just as you did it in the trial round or you can perform it in an alternative version in which you will be able to solve more matrices correctly within the allocated time.
            The tool will red-highlight incorrectly checked 'b' letters and indicate how many 'd' letters are still unchecked. Additionally, all 'd' letters will be highlighted in yellow
            which should help you solve the matrices faster. You can make your choice by clicking one of the buttons below.
        </p>

    </div>
    <div class="row">
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                    <button name = "tool" value = 0 class="btn btn-primary" >Continue as in the trial!</button>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 border-0">
                <div class="d-flex flex-column card-body">
                        <button  name = "tool" value = 1 class="align-self-left mt-auto btn btn-primary" >Continue in the alternative version!</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}