{{ 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: 1000px;
      padding: 0 20px;
    }

    h1{
      text-align: center;
      margin-bottom: 40px;
      font-size: 45px;
    }
    h2{
        text-align: center;
        margin-bottom: 40px;
        font-size: 47px;
    }

    .section {
      margin-bottom: 70px;
    }


  </style>

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

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

{% endif %}



  <h1>Payment</h1>

<div class="section">
  <p>You will be asked to make up to two decisions. Exactly one decision will be chosen for payment. Your decision that counts for payment will be determined as follows.</p>
    
  <p>
      First, you will be asked to make a decision in the Blue Choice Task. With a 50% probability, this will be your only decision, and you will not move on to make a decision in the Red Choice Task. If the experiment stops after your choice for blue, then that is the decision that will count for payment. You will win if blue is drawn from your selected bag.
  </p>
  
  <p>
      Alternatively, there is a 50% chance that you will move on to the Red Choice Task. If you happen to move on to the Red Choice Task, then your decision in this task will be the decision that will count for your payment. In this case, your earlier choice on blue would have no effect on your payment. You will win if red is drawn from the bag you choose in the Red Choice Task.
  </p>
  
  <p>
      Your continuation to the Red Choice Task will be determined by the flip of a coin. If "Heads", then you will continue. If "Tails", then you will not continue.
  </p>
  
  <p style= "margin-bottom: 50px">Finally, after all decisions have been made and everyone knows which choice task will count for their payment, the implementer will draw one chip from Bag A and one chip from Bag B. These drawings will determine your final payment and mark the conclusion of the experiment.</p>
    
  <p style= "margin-bottom: 15px">You will be paid according to your decision in the payment-relevant choice task. Below we give examples of how you will be paid.</p>
    
  <p style= "margin-bottom: 4px">Suppose that your payment-relevant choice task is determined to be the Blue Choice Task ("Tails").</p>
    
    <p style= "margin-left: 10px; margin-bottom: 0px">
        &#8226; If you chose Bag A, then you would win if the implementer went on to draw a blue chip from Bag A (50%).
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 30px">
      &#8226; If you chose Bag B, then you would win if the implementer went on to draw a blue chip from Bag B (unknown %). 
    </p>
    
    <p style= "margin-bottom: 4px">
    Suppose that your payment-relevant choice task is determined to be the Red Choice Task ("Heads").    
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 0px">
    &#8226; If you chose Bag A, then you would win if the implementer went on to draw a red chip from Bag A (50%).    
    </p>
    
    <p style="margin-left: 10px; margin-bottom: 50px">
    &#8226; If you chose Bag B, then you would win if the implementer went on to draw a red chip from Bag B (unknown %).
    </p>
    
    </div>
    




{% if Role != 'Subject' %}
<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 }}