{{ 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 two decisions, one in the Red Choice Task and one in the Blue Choice Task. After everyone has made their decisions in both choice tasks, the implementer will draw one chip from each bag to determine whether you earn the additional payment in each of your choice tasks.</p>
    
  
  <p style= "margin-bottom: 50px">Finally, after everyone has learned whether they win or lose in each of the choice tasks, the implementer will flip a coin for each individual participant to determine which choice task will be relevant for payment. If "Heads" is flipped, then you will be paid for the Blue Choice Task. If "Tails" is flipped, then you will be paid for the Red Choice Task. The coin flip will finalize your total payment, and it will 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 Red 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 drew a red 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 drew a red chip from Bag B (unknown %). 
    </p>
    
    <p style= "margin-bottom: 4px">
    Suppose that your payment-relevant choice task is determined to be the Blue 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 drew a blue 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 drew a blue 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 }}