{% 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:  Yet Another Rule</h3>
        <hr>

        <li>
            In the next few tasks we will have you play the same game with a robot, but this time you will be paid to implement <b>yet another different</b> rule.  The new rule is "<span style='color:blue;font-weight:bold'>In rounds 1, 2 and 3 choose B.  After round 3:  choose A if your counterpart chose A in all of the previous 3 rounds;  otherwise choose B.</span>"
        </li>
        <br>

        <li>
            This rule is like the last rule but is more involved.  It again instructs you to start by <b>B</b>, this time in the first three rounds.   However afterwards, you should look back to the previous <b>three</b> rounds.  If your robot counterpart  chose A <b>during <u>all</u> of those three rounds</b>, choose A.  However, if the robot chose B in <b><u>any</u></b> of the last three rounds, choose B.
        </li>
        <hr>
        <u>Example:</u>
        <div class='container-fluid' style='display:block;text-align:center'>
            <img src="{% static 'complex2021/Instruction_P1_3.png' %}" width="700px" height="515px"/>
        </div>

        <hr>

        <li>
            In the example above, you have successfully followed the rule so far.  In <b>rounds 1, 2 and 3</b> you chose B.  In rounds 1, 2 and 3 the robot chose A all three times.   In <b>round 4</b> you can see that your robot counterpart chose <b>A in all of the three previous rounds</b> so you now <b>switch to choosing A</b>, following the rule.   In round 4 the robot chose B.  That means in <b>round 5</b> the robot <b>did not</b> choose A in <b>all</b> of the previous three rounds.  So you switched back to <b>B</b> in <b>round 5</b>, as the rule instructs.
        </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.
        </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_TF3T.label }}</label>
        <span>{{ form.quiz_TF3T }}</span>
        <span class="error">{{ form.quiz_TF3T.errors }}</span>
    </ul>
</div>

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

{% endblock %}