{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<style>
        #corner-display {
            position: fixed;
            top: 10px;
            right: 20px;
            background-color: #f0f0f0;
            padding: 8px 12px;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            font-weight: bold;
            z-index: 1000;
        }
    
 body {
      font-family: Arial, sans-serif;
      margin: 40px auto;
      line-height: 1.6;
      max-width: 800px;
      padding: 0 20px;
    }

    h1{
      text-align: center;
      margin-bottom: 40px;
    }
    
   </style>



{% if Role == 'Subject' %}
    <style>
        .otree-btn-next {
            display: none;
        }
    </style>

    <div id="corner-display">
        {{ Subject_Number }}
    </div>



{%  elif Role == "Implementer"  %}
    <style>
        .otree-btn-next {
            display: none;
        }
    </style>

    <div id="corner-display">
        i
    </div>



{%  endif  %}

<h1>General Instructions</h1>

<p>
    In this experiment, there are two bags, Bag A and Bag B. Each bag contains two chips, and the color of each chip is either red or blue. During the experiment, you will be given two choice tasks. These choice tasks are called the Red Choice Task and the Blue Choice Task, respectively. In each choice task, you must decide whether you want Bag A or Bag B to count for your payment. In the Red Choice Task, you will earn an additional payment if red is drawn from your selected bag. In the Blue Choice Task, you will earn an additional payment if blue is drawn from your selected bag.
</p>

<p>
    After all decisions are made, one chip will be drawn from each bag. These drawings will determine whether you earn the additional payment in each of the two separate choice tasks. Once you know whether you win or lose in each choice task, one of the two choice tasks will be randomly selected to count for your payment. For each participant, the flip of a coin will determine whether you are paid for your decision in the Red Choice Task or your decision in the Blue Choice Task.
</p>

<p>
    To help implement this procedure in a fair and transparent manner, one of your fellow participants has been assigned the role of implementer. The implementer will make one draw from each bag to determine whether you win in each choice task. Once all decisions have been made and everyone knows whether they won or lost in each choice task, the implementer will flip a coin for each individual participant to determine which of the two choice tasks is relevant for payment. The flip of the coin will finalize your total payment, and it will mark the conclusion of the experiment. 
</p>

<br>

<p>
    In the top right corner of your screen is a small box with a letter/number. If your box contains a number, then you have been assigned the role of a <em>participant</em>. If your box contains the letter "i", then you have been assigned the role of the <em>implementer</em>.
</p>

<p>
    If you have been assigned the role of implementer, please see the experimenter in the back to get instructions on how the drawings and coin flips will take place.
</p>

<p>
    If you have been assigned the role of participant, please stay seated and follow along as the instructions are read aloud.
</p>

{% if Role == "Experimenter" %}

<button id="proceed-button" onclick="sendProceedSignal()">Proceed</button>

{% endif %}



{{ endblock }}

{{ block scripts }}
<script>
function liveRecv(data) {
    console.log("Received:", data); // Debug
    if (data === "advance") {
        document.forms[0].submit();
    }
}

function sendProceedSignal() {
        liveSend("Proceed");
    }

</script>
{{ endblock }}