{{ 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 make two decisions. First, you will decide whether you will face the Blue Choice Task or the Red Choice Task. Then, for your selected choice task, you will decide whether the draw from Bag A will count for your payment or the draw from Bag B will count for your payment.</p>
    
  <p style= "margin-bottom: 50px">After both decisions have been made, the implementer will draw one chip from Bag A and one chip from Bag B.</p>
    
  <p style= "margin-bottom: 15px">You will be paid according to your decision in the choice task that you select. Below we give examples of how you will be paid.</p>
    
  <p style= "margin-bottom: 4px">Suppose that you select the Blue Choice Task.</p>
    
    <p style= "margin-left: 10px; margin-bottom: 0px">
        &#8226; If you choose Bag A, then you will win if the implementer draws a blue chip from Bag A (50%).
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 30px">
      &#8226; If you choose Bag B, then you will win if the implementer draws a blue chip from Bag B (unknown %).
    </p>
    
    <p style= "margin-bottom: 4px">
    Suppose that you select the Red Choice Task.    
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 0px">
    &#8226; If you choose Bag A, then you will win if the implementer draws a red chip from Bag A (50%).
    </p>
    
    <p style="margin-left: 10px; margin-bottom: 50px">
    &#8226; If you choose Bag B, then you will win if the implementer draws 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 }}