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

{% block title %}

{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            font-size:14px;
        }

        th {
            padding: 15px;
            text-align:center;
            font-weight:normal;
        }

        table.center {
            margin-left: auto;
            margin-right: auto;
        }

        .strat{
            width:200px;
	        height:150px; word-wrap:break-word;
        }

        legend{
            font-size:18px;
            font-weight:bold;
        }

        label{
            font-weight:normal;
        }

        li{
            font-size:16px;
        }

        .error {
        color: red;
        }

        .red{color:red;}
        .blue{color:blue;}
        .green{color:green;}
        .purple{color:purple;}
        .orange{color:orange;}
    </style>

{% endblock %}

{% block content %}

<div class="card card-body instructions">
    <ul class='page'>
        <hr>
        <h3>Part 1:  A Different Rule</h3>
        <hr>

        <li>
            In the next few tasks we will have you play the same game (with a robot counterpart), but this time you will be paid to implement a <b>different</b> rule.The new rule is "<span style='color:blue;font-weight:bold'>In round 1 choose B.  After round 1:  choose whatever your counterpart chose last round.</span>"
        </li>
        <br>


        <li>
            This rule instructs you to always start by choosing <b>B</b> in the very first round of a game.   Then, in future rounds look back to the previous round and do whatever your robot counterpart did in that previous round.
        </li>
        <hr>
        <u>Example:</u>
        <div class='container-fluid' style='display:block;text-align:center'>
            <img src="{% static 'complex2021/Instruction_P1_2.png' %}" width="700px" height="425px"/>
        </div>

        <hr>

        <li>
            In the example above, you have successfully followed the rule so far.  In <b>round 1</b> you chose B, just as the rule instructs.  The robot chose B in round 1, so in <b>round 2</b> you chose exactly what the robot chose in round 1:  you choose B.   In round 2, the robot chose A, so now in <b>round 3</b> you switched to A to match what it did in round 2.   You will continue like this from now on, simply do whatever the robot did last round.
        </li>

        <br>

        <li>
            Everything else (other than the rule) is exactly the same as before.  The game continues with {{ continuation }}% chance after each round and you lose 20 points every time you make a mistake in following the rule.   You will play one game under this rule.
        </li>
        <br>

        <li>
            Please finish the following comprehension question and then click <b>Next</b> to begin.
        </li>
        <br>

        <hr><h3>Comprehension Question</h3><hr>
        <label>1. {{ form.quiz_TFT.label }}</label>
        <span>{{ form.quiz_TFT }}</span><span class="error">{{ form.quiz_TFT.errors }}</span>
    </ul>
</div>

<p style="text-align:right">
    <button class="otree-btn-next btn btn-primary">Next</button>
</p>

{% endblock %}