{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<style>

    
 body {
      font-family: Arial, sans-serif;
      margin: 40px auto;
      line-height: 1.6;
      max-width: 800px;
      padding: 0 20px;
    }
    
    
.exp-container {
        display: flex;
        justify-content: space-between;
        padding: 40px;
        font-family: Arial, sans-serif;
    }

    .exp-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 47%;
    }

    .exp-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 6px;
        background-color: #f9f9f9;
        height: 50px; /* <-- fixed height for all rows */
        box-sizing: border-box;
    }
    
    .exp-row span {
        margin-right: 10px; /* or more if you want extra spacing */
        min-width: 60px;     /* to keep label width consistent */
    }

    .exp-label {
        font-weight: bold;
    }

    .exp-response {
        color: #333;
        min-width: 150px;
        text-align: right;
    }

    .exp-input-field {
        width: 150px;
        padding: 5px;
        font-size: 1em;
    }

    .exp-divider {
        width: 2px;
        background-color: #aaa;
        margin: 0 20px;
    }

    .left-column {
        align-items: flex-start;
    }

    .right-column {
        align-items: flex-end;
    }
    
    
</style>




<div style="text-align: center;  margin-bottom: 50px;">
    <img src="https://i.imgur.com/3ifRdZZ.png"
         alt="FSU Header"
         style="max-width: 100%; height: auto;">
  </div>
  
<p>
    You are being asked to voluntarily participate in a research study. This study is an experiment examining how individuals make decisions in an economic setting. Our purpose is to compare observed behavior with a theoretical model of behavior in tasks like these. The results of this experiment will be analyzed as part of a research study that is intended to be published in an academic journal. If you choose to participate, you will be asked to consider a set of choice problems where you will have to indicate which option you most prefer. Specifically, there are two bags with colored chips inside. One chip will be drawn from each bag. After receiving some information about the two bags and the winning conditions, you must decide which draw will count for your payment. This experiment will take place in FSU's XS/FS experimental laboratory. The experiment will last approximately 30 minutes.
</p>

<p>
    This research is being funded by the FSU Congress of Graduate Students Dissertation Research Grant and FSU Economics department faculty research funds. 
</p>

<p>
    If you agree to take part in this study and participate for the full session, you will receive $5. Based on the decisions you make during the experiment, you will have the opportunity to make up to an additional $10.20. The payment for this experiment will be made in cash at the end of the session. The instructions include detailed information regarding how payment will be determined.
</p>

<p>
    We will securely store your information. Only members of the study team will have access to any identifiable information. We will store any paper files that contain identifiable information or your responses in locked filing cabinets. We will collect, transmit, store and access electronic files in computer systems with password, encryption and other authentication protection. However, we cannot guarantee complete confidentiality.
</p>

<p>
    If you have any questions, please contact Jose Lopez at jlopez4@fsu.edu or John Hamman at jhamman@fsu.edu.
</p>

<p>
    If you have any questions or concerns about your rights as a research participant, or questions or concerns regarding the study and would like to talk to someone other than the researcher(s), you are encouraged to contact the FSU Office for Human Subjects Protection (OHSP) at (850) 644-7900, by email at humansubjects@fsu.edu, or by mail at 2010 Levy Avenue, Research Foundation Building B, Suite 276, Tallahassee, FL 32306-2742.
</p>


{% if Role_Subject_or_Experimenter != 'Experimenter' %}

<button id="confirm-button" onclick="sendConfirmSignal()" type="button">Confirm</button>


{%  else  %}

<div class="exp-container">
    <!-- Left Column -->
    <div class="exp-column left-column">
        <div class="exp-row">
            <div class="exp-label">1</div>
            <div id="response-1" class="exp-response">
                -
            </div>
        </div>

        <div class="exp-row">
            <div class="exp-label">2</div>
            <div id="response-2" class="exp-response">
                -
            </div>
        </div>
        
        <div class="exp-row">
    <div class="exp-label">3</div>
    <div id="response-3" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">4</div>
    <div id="response-4" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">5</div>
    <div id="response-5" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">6</div>
    <div id="response-6" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">7</div>
    <div id="response-7" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">8</div>
    <div id="response-8" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">9</div>
    <div id="response-9" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">10</div>
    <div id="response-10" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">11</div>
    <div id="response-11" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">12</div>
    <div id="response-12" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">13</div>
    <div id="response-13" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">14</div>
    <div id="response-14" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">15</div>
    <div id="response-15" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">16</div>
    <div id="response-16" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">17</div>
    <div id="response-17" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">18</div>
    <div id="response-18" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">19</div>
    <div id="response-19" class="exp-response">
        -
    </div>
</div>

<div class="exp-row">
    <div class="exp-label">20</div>
    <div id="response-20" class="exp-response">
        -
    </div>
</div>
        
<div class="exp-row">
    <div class="exp-label">21</div>
    <div id="response-21" class="exp-response">
        -
    </div>
</div>
 
</div>

</div>

<button type="button" onclick="checkUpdates()">Refresh Data</button>

<button disabled id="proceed-button" onclick="sendProceedSignal()">Proceed</button>

{% endif %}


{{ endblock }}

{{ block scripts }}
<script>
let Info_Sheet = "Confirmed"


if (js_vars.Role_Subject_or_Experimenter == "Experimenter"){
	if (js_vars.Participant_1 == 0) {
      document.getElementById('response-1').innerText = 'N/A';
    } 
  	if (js_vars.Participant_2 == 0) {
      document.getElementById('response-2').innerText = 'N/A';
    } 
  	if (js_vars.Participant_3 == 0) {
      document.getElementById('response-3').innerText = 'N/A';
    } 
  	if (js_vars.Participant_4 == 0) {
      document.getElementById('response-4').innerText = 'N/A';
    } 
  	if (js_vars.Participant_5 == 0) {
      document.getElementById('response-5').innerText = 'N/A';
    }  
  	if (js_vars.Participant_6 == 0) {
      document.getElementById('response-6').innerText = 'N/A';
    } 
  	if (js_vars.Participant_7 == 0) {
      document.getElementById('response-7').innerText = 'N/A';
    } 
  	if (js_vars.Participant_8 == 0) {
      document.getElementById('response-8').innerText = 'N/A';
    } 
  	if (js_vars.Participant_9 == 0) {
      document.getElementById('response-9').innerText = 'N/A';
    } 
  	if (js_vars.Participant_10 == 0) {
      document.getElementById('response-10').innerText = 'N/A';
    } 
  	if (js_vars.Participant_11 == 0) {
      document.getElementById('response-11').innerText = 'N/A';
    } 
  	if (js_vars.Participant_12 == 0) {
      document.getElementById('response-12').innerText = 'N/A';
    }  
  	if (js_vars.Participant_13 == 0) {
      document.getElementById('response-13').innerText = 'N/A';
    } 
  	if (js_vars.Participant_14 == 0) {
      document.getElementById('response-14').innerText = 'N/A';
    } 
  	if (js_vars.Participant_15 == 0) {
      document.getElementById('response-15').innerText = 'N/A';
    } 
  	if (js_vars.Participant_16 == 0) {
      document.getElementById('response-16').innerText = 'N/A';
    } 
  	if (js_vars.Participant_17 == 0) {
      document.getElementById('response-17').innerText = 'N/A';
    } 
  	if (js_vars.Participant_18 == 0) {
      document.getElementById('response-18').innerText = 'N/A';
    } 
  	if (js_vars.Participant_19 == 0) {
      document.getElementById('response-19').innerText = 'N/A';
    } 
  	if (js_vars.Participant_20 == 0) {
      document.getElementById('response-20').innerText = 'N/A';
    }
  	if (js_vars.Participant_21 == 0) {
      document.getElementById('response-21').innerText = 'N/A';
    } 
}







function liveRecv(data) {
    console.log("Received:", data); // Debug
    if (data === "advance") {
        setTimeout(function() {
        	document.forms[0].submit();
    	}, 1000);
    }
  	else {
      if (js_vars.Role_Subject_or_Experimenter == "Experimenter"){
        updateExperimenterPage(data);
      }
      else {
        updateSubjectPage(data);
      }
    }
}

function sendProceedSignal() {
        liveSend("Proceed");
    }



function sendConfirmSignal() {
  document.getElementById('confirm-button').disabled = true;
 		
  		setTimeout(function() {
        	liveSend({
       			"Info_Sheet": Info_Sheet
     		});
    	}, 1000);        
    }


function unlockButtons(){
  		liveSend({
       "Info_Sheet": "UnlockButtons"
        });
}




function checkUpdates(){
  		liveSend({
       "Info_Sheet": Info_Sheet
        });
}

function updateExperimenterPage(data) {
  	if (data.Info_Sheet_1 == "Confirmed") {
      document.getElementById('response-1').innerText = 'Confirmed';
    } 
 
  	if (data.Info_Sheet_2 == "Confirmed") {
      document.getElementById('response-2').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_3 == "Confirmed") {
      document.getElementById('response-3').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_4 == "Confirmed") {
      document.getElementById('response-4').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_5 == "Confirmed") {
      document.getElementById('response-5').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_6 == "Confirmed") {
      document.getElementById('response-6').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_7 == "Confirmed") {
      document.getElementById('response-7').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_8 == "Confirmed") {
      document.getElementById('response-8').innerText = 'Confirmed';
    } 
 
  	if (data.Info_Sheet_9 == "Confirmed") {
      document.getElementById('response-9').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_10 == "Confirmed") {
      document.getElementById('response-10').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_11 == "Confirmed") {
      document.getElementById('response-11').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_12 == "Confirmed") {
      document.getElementById('response-12').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_13 == "Confirmed") {
      document.getElementById('response-13').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_14 == "Confirmed") {
      document.getElementById('response-14').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_15 == "Confirmed") {
      document.getElementById('response-15').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_16 == "Confirmed") {
      document.getElementById('response-16').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_17 == "Confirmed") {
      document.getElementById('response-17').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_18 == "Confirmed") {
      document.getElementById('response-18').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_19 == "Confirmed") {
      document.getElementById('response-19').innerText = 'Confirmed';
    } 

  	if (data.Info_Sheet_20 == "Confirmed") {
      document.getElementById('response-20').innerText = 'Confirmed';
    } 
  
  	if (data.Info_Sheet_21 == "Confirmed") {
      document.getElementById('response-21').innerText = 'Confirmed';
    }
  
  	if (document.getElementById('response-1').innerText != '-' && document.getElementById('response-2').innerText != '-' && document.getElementById('response-3').innerText != '-' && document.getElementById('response-4').innerText != '-' && document.getElementById('response-5').innerText != '-' && document.getElementById('response-6').innerText != '-' && document.getElementById('response-7').innerText != '-' && document.getElementById('response-8').innerText != '-' && document.getElementById('response-9').innerText != '-' && document.getElementById('response-10').innerText != '-' && document.getElementById('response-11').innerText != '-' && document.getElementById('response-12').innerText != '-' && document.getElementById('response-13').innerText != '-' && document.getElementById('response-14').innerText != '-' && document.getElementById('response-15').innerText != '-' && document.getElementById('response-16').innerText != '-' && document.getElementById('response-17').innerText != '-' && document.getElementById('response-18').innerText != '-' && document.getElementById('response-19').innerText != '-' && document.getElementById('response-20').innerText != '-'){
      document.getElementById('proceed-button').disabled = false;
    }
}





function updateSubjectPage(data) {
  if (data.Unlock == "Yes"){
    document.getElementById('confirm-button').disabled = false;
  }
}




</script>
{{ endblock }}