{{ 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 you will only be asked to make a decision for one of the two choice tasks. You must decide whether you will face the Blue Choice Task or the Red Choice Task.
      </p>
      
      <p style= "margin-bottom: 5px">
          In this experiment, you will make two decisions.
      </p>
      <p style="margin-bottom: 0px; margin-left: 10px">
          &#8226; Firstly, you will decide whether you will face the Blue Choice Task or the Red Choice Task.
      </p>
      <p style="margin-bottom: 0px; margin-left: 10px">
          &#8226; Secondly, for your selected choice task, you will decide whether you prefer Bag A or Bag B.
      </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 }}