{{ 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. The implementer is tasked with flipping a coin for each participant. After everyone has made their decision in the Red Choice Task, the implementer will separately flip one coin for each individual participant, determining whether you will move on to the Blue Choice Task or if the Red Choice Task was your final decision.</p>
    
    <p>
       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 you will move on to the Blue Choice Task. If you are number 5 and the fifth coin flip is "Tails", then you will not move on to the Blue Choice Task. 
    </p>    
  
  <p style= "margin-bottom: 70px">At the end of the experiment, after all decisions have been made and everyone knows the choice task that will count for their payment, the implementer will make one draw from each of the bags. These drawings will determine whether you win or lose in your decision that was chosen to count for payment.</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> You move on to the Blue Choice Task, and the Blue Choice Task is relevant for your payment.
    </p>
    
    <p style= "margin-left: 10px; margin-bottom: 30px">
      &#8226; <strong>Tails:</strong> You do NOT move on to the Blue Choice Task, and the Red Choice Task is relevant for your payment.
    </p>




    
    <p>
      To make sure that you understand the experiment, we will now walk through two practice rounds. These practice rounds are just to illustrate how the process works; they 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 }}