{% 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:  Following a Rule</h3><hr>

        <li>
            In the first part of the experiment, you will play  <b>several games</b> with a robot counterpart. Each game is divided up into a number of <b>rounds</b>.  In each round you and the robot will each choose an <b>action</b>, either '<b>A</b>' or '<b>B</b>' by clicking a radio button, as in the example below.  Each round, you will make your choice by selecting one of the radio buttons, and clicking <b>Submit</b>.
            The robot's choices <b>do not</b> depend on your actions -- they were pre-determined ahead of time.
        </li>

        <br>
        <li>
            You will not know what the robot will do while you're making your choice, but you will be shown what the robot did afterwards.
            At the bottom of the screen is a <b>history</b>, showing what you and your robot counterpart did in each of the <b>previous rounds</b> of the game (with the most recent round's action choices at the top).
        </li>

        <br>
        <li>
            Your job is to <b>follow a rule</b> that we <b>assign</b> to you and <span style='color:blue; font-weight:bold'>show on your screen in blue</span>, as in the example.  The rule specifies what you should do as a function of the <b>choices the robot made in past rounds</b>.   We will give you an <b>initial pot of {{ Constants.payoff_initial }} points</b> each game.  Every time you make a mistake in following the rule -- every time you make a choice that violates the rule -- you will lose 20 points from this initial pot of points.   At the end of the experiment, you will earn ${{ Constants.conversion_rate}} for every point you earn, added up over all games.
        </li>
        <hr>
        <u>Example:</u>
        <div class='container-fluid' style='display:block;text-align:center'>
            <img src="{% static 'complex2021/Instruction_P1_1.png' %}" width="750px" height="484px"/>
        </div>

        <hr>
        <li>
            For the first game, the rule is very simple:  <span style='color:blue; font-weight:bold'>Always choose A</span>.  That means you should <b>ignore</b> what your robot counterpart has done and <b>just select A</b> each round!   The rule is always shown as "<b>Your Rule</b>" on your screen (as in the example) to remind you of what rule you are supposed to be following.  In the example above, you have successfully followed the rule so far by always choosing <b>A</b>.
        </li>

        <br>
        <li>
            How many rounds will there be in each game?  The number of rounds in a game, i.e., the game length, is <b>randomly determined</b> as follows: After each round, there is an {{ continuation }}% chance that the game will continue for at least one more round. Specifically, after each round, the computer will generate a random number between 1 and 100. If the number is lower than or equal to {{ continuation }}, the game will continue for at least one more round; otherwise, the game will end. For example, if you are in round 1, there is an {{ continuation }}% chance that the game will have a 2nd round; if you are in round 5, there is also an {{ continuation }}% chance that the game will have a 6th round. That is, at any point in a game, there is an {{ continuation }}% chance that the game will continue.
        </li>

        <br>
        <li>
            However, we will have you play the game in <b>blocks of 5 rounds</b>. When the game ended in a block, we will tell you at which round in that block it ended.  Any decision you made during that block but after the game randomly ended will not impact your payment. For example, if a game ended in round 7 during the second block (rounds 6-10), after round 10, we will tell you the game has ended. And your decisions in rounds 8-10 will not impact your payment. If you continue past the end of a block, it means the game didn't end during that block. For example, if you enter round 6, it means the game didn't end in any of rounds 1-5 (i.e. during the first block).
        </li>

        <br>
        <li>
            Please finish the following comprehension questions and then click <b>Next</b> to begin.  We will have you play one game with a randomly determined number of rounds under this rule.
        </li>
        <br>

        <hr><h3>Comprehension Questions</h3><hr>
        <label>1. {{ form.quiz_1.label }}</label>
        <span>{{ form.quiz_1 }}</span><span class="error">{{ form.quiz_1.errors }}</span>
        <br>
        <label>2. {{ form.quiz_2.label }}</label>
        <span>{{ form.quiz_2 }}</span><span class="error">{{ form.quiz_2.errors }}</span>
        <br>
        <label>3. {{ form.quiz_3.label }}</label>
        <span>{{ form.quiz_3 }}</span><span class="error">{{ form.quiz_3.errors }}</span>
    </ul>
</div>


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


{% endblock %}