{{ 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: 950px;
      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 %}


    

<h2>Implementation</h2>

<div class="section">
    
  <p>At the beginning of the experiment, one of your fellow participants was chosen to be the implementer. The job of the implementer is to help conduct the experiment in a fair and transparent manner. After everyone has made their decisions in both choice tasks, the implementer will draw one chip from each bag. Finally, once everyone knows whether they win or lose for each choice task, the implementer will flip a coin for each participant to determine which of the two choice tasks are relevant for payment.</p>

  
  <p style= "margin-bottom: 70px">The coin flips will be performed as follows. In the top-right corner of your screen is a number. Starting from number 1, the implementer will say the number and then flip the coin for that number. If you are number 1 and the result of the first coin flip is "Heads", then your payment-relevant choice task will be the Blue Choice Task. If you are number 5 and the fifth coin flip is "Tails", then your payment-relevant choice task will be the Red Choice Task.</p>
  


  <p style= "margin-bottom: 4px">Below is a summary of how your coin flip corresponds to your payment-relevant choice task.</p>
    
    <p style= "margin-left: 10px; margin-bottom: 0px">
        &#8226; <strong>Heads:</strong> Blue Choice Task is relevant for payment
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 30px">
      &#8226; <strong>Tails:</strong> Red Choice Task is relevant for payment
    </p>




    
    <p>
      To make sure you understand the experiment, we will now walk through one practice round. This practice round is just to illustrate how the process works; it will not be used for payment. 
    </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 }}