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


{% block title %}
    PART 2 - Instructions
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}
    <div class="card bg-light m-3"  style="text-align: justify">
        <div class="card-body">

            <table class="table-condensed" style="margin-top:10px; margin-bottom:20px;">
                <tr>

                    <td>
                        <center>
                            <img src="{% static 'rsz_memory_pair.png' %}"/>
                        </center>
                    </td>
                    <td>In the following task, you will see a 4x5-matrix containing
                    20 cards on your screen. The goal is to <strong>find pairs of matching pictures</strong>.
                    </td>
                </tr>
            </table>

            <p>
                As soon as you start the task by hitting the 'Start' button,
                you will have <strong>{{ Constants.total_time_minutes }} minutes</strong> to complete the task.

            </p>
            <p>
                When you start, you will face a matrix like the one represented below. Click on any two cards in the matrix. If the two cards don't match, they are turned back over. If they do match, they stay revealed. <br>
                Then try and find the next pair within the matrix until all pairs are revealed. <br>
                Once the whole matrix is solved, the cards are shuffled and a new matrix is presented. <br>
                <strong>Complete as many matrices as possible within the given time frame and with the lowest number of moves</strong>.<br>

            </p>
            <p>
                A move is a pair of clicks corresponding to the pair of cards you are trying to match.<br>
                For each matrix, <strong>the more moves to complete it, the lower the star rating, hence the lower your payoff</strong> in that matrix. For more detail, see the rule below.<br>
                By the end of the {{ Constants.total_time_minutes }} minutes,
                <strong>your payoff will depend on the total number of stars you earn over all matrices. Each star is worth £{{ Constants.payoff_per_star }}.</strong>
{#                #}
{#                <strong>the number of stars is summed up across completed matrices to define your payoff in this task</strong>.#}
{#                <strong>For each star you earn £{{ Constants.payoff_per_star }}0</strong>.#}
                <br><br>
            </p>


            <table class="table-condensed" style="margin-top:10px; margin-bottom:20px;">
                <tr>
                    <td style="width: 170px;">
                        <img src="{% static 'rsz_1memory_grid_example.png' %}"/>
                    </td>
                    <td style="width: 700px;">

                        You start with 3 stars.<br>
                        If you complete the matrix in:<ul>
                        <li>14 or less moves: 3 stars</li>
                        <li>14 to 18 moves: 2.5 stars</li>
                        <li>18 to 22 moves: 2 stars</li>
                        <li>22 to 26 moves: 1.5 stars</li>
                        <li>26 to 30 moves: 1 star</li>
                        <li>30 to 34 moves: 0.5 stars</li>
                        <li><strong>more than 34 moves: 0 stars</strong></li></ul>
                    </td>
                </tr>
            </table>

            <p>When you are ready, click the "Start" button.</p>

        </div>
    </div>

    <div>
        <button name="start_experiment" class="btn btn-primary btn-large">Start</button>
    </div>
{% endblock %}