{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
    Instructions
{% endblock %}

{% block content %}

    <p> In this HIT you will play {{ session.config.num_games }} two-player
    games with many different real people. In each game, you will see a table
    like the one below. You will choose one of the three rows, and the other
    person will choose a column in the same way. These two decisions select one
    cell from the table, which determines the points you will each receive.


    <div id="target1" class="target"></div>
    <br>
    <p>
    In each cell, there are two numbers. The first (orange) number is the
    number of points you get, and the second (blue) number is the number of
    points the other person gets. These points will determine the bonus
    payment you receive at the end of the HIT.
    For example, if you choose the third row and the other person chooses
    the second column, you would receive 4 points and she or he would receive
    8 points, as shown below.

    <div id="target2" class="target"></div>
    <br>
    <p>
    You will be playing against real people. For each game, you will be
    matched with a <b>new person</b>. To keep things moving quickly, you will
    sometimes be matched with a player who has already played the game in a
    previous round. Although your move will not affect that player's score,
    it will affect future players that get matched with you, just as your
    score is determined by the previous player's move.

    <p>
    Because you are playing against real people, there may be a delay after
    the first game while other players complete the instructions. Please be
    patient! It should go much faster for the remaining games.
    You will be compensated with an extra bonus payment for the time spent on wait pages at a rate of <b>$7 an hour</b>.

    <p>
    Your bonus will be determined by the total number of points you earn in the
    experiment. You will get <b>$1</b> bonus payment for each <b>{{points_per_dollar}} points </b>.

    <p>
    One last thing. To prevent people from quickly clicking through the
    experiment without thinking, we enforce that you spend a minimum of
    {{session.config.min_time}} seconds on each game.

    <p>
    Before beginning to play, you must pass a quiz to demonstrate that you
    understand the rules. You must pass all three pages of the quiz before you
    can continue.



    <div class="centered">
        {% next_button %}
    </div>


    <script>
        var game = [
          [[3, 3], [0, 6], [1, 5]],
          [[6, 0], [9, 0], [2, 6]],
          [[2, 3], [4, 8], [8, 1]],
        ];
        var row = null;
        var col = null;

        $(document).ready(function () {
          showGame('#target1', game);
        });
        $(document).ready(function () {
          showResult('#target2', game, 2, 1);
        });
    </script>

{% endblock %}