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

    h1{
      text-align: center;
      margin-bottom: 40px;
    }
    h2{
        text-align: center;
        margin-bottom: 20px;
    }

    .section {
      margin-bottom: 70px;
    }

    
   </style>



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

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

{% endif %}





 <h1>Example Choice Task</h1>

<div class="section">
  <p>This is an example of the Blue Choice Task. In this task, you must choose between Bag A and Bag B. If you were to choose Bag A, then you would earn an additional payment if blue was drawn from Bag A. If you were to choose Bag B, then you would earn an additional payment if blue was drawn from Bag B. The picture has been provided to remind you of the contents of each bag. </p>


  <div style="text-align: center; margin: 20px 0;">
    <img src="https://i.imgur.com/799jodZ.png"
         alt="Bag A and Bag B diagram"
         style="max-width: 100%; height: auto;">
  </div>
    
</div>


    <h2><strong><span style="color: blue;">Blue</span> Choice Task</strong></h2>
  
  <div class="section">
    <p style="margin-bottom: 10px;">Which one do you prefer?</p>
    <p style="margin-bottom: 0px; margin-left: 30px;"><strong>Bag A:</strong> You win $5.00 if the implementer draws a blue chip from Bag A, and $0 otherwise.</p>
    <p style="margin-bottom: 40px; margin-left: 30px;"><strong>Bag B:</strong> You win $5.20 if the implementer draws a blue chip from Bag B, and $0 otherwise.</p>

    <p>In the example, you need to choose between Bag A and Bag B. The two options have the same winning color but differ in the amount you can win and the bag that counts for payment. This is called the Blue Choice Task because, for either option, you win if blue is drawn from the bag.</p>
      
      <br>
      
      <p>
          During the experiment, there will also be a Red Choice Task. The only difference in the Red Choice Task is that the winning color is red instead of blue.
      </p>
      
    <p style= "margin-bottom: 50px">
      Recall that only one of the two choice tasks will be relevant for your payment. The flip of a coin will determine whether you will move on to the Red Choice Task or whether you will stop after the Blue Choice Task.
      </p>
      
      <p style= "margin-bottom: 5px">
          In this experiment, you will make up to two decisions.
      </p>
      <p style="margin-bottom: 0px; margin-left: 10px">
          &#8226; Firstly, you will decide whether you prefer Bag A or Bag B in the Blue Choice Task.
      </p>
      <p style="margin-bottom: 0px; margin-left: 10px">
          &#8226; Secondly, if it is determined that you should move on to the Red Choice Task, then you will decide whether you prefer Bag A or Bag B in the Red Choice Task.
      </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 }}