{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
   <b style="color:grey"> Instructions Quiz </b>
{% endblock %}



{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 12pt;

    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 12pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: auto;
    width: 100%;
    }

.history th {
    font-size: 8pt;
    text-align: center;
    background: lightgray;
    height: 20px;
    }


.history td {
    font-size: 9pt;
    text-align: center;
     height: 20px;
    }



</style>
{% endblock %}

{% block content %}


<h6>Before proceeding to the <b style="color:gray">Practice Rounds</b>, please answer the following questions regarding the instructions you
    just read: </h6>
<br>

{# ------------------------------------------------------------- #}

<div id="Q1_hide" style="display:inline; ">
    1. In each round you'll be  paired with another participant.
    Is it likely that you'll be paired with the exact same participant in many consecutive rounds?
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q1_1" name="Q1" value="1">
  <label for="Q1_1">Extremely likely, I'll be  paired with the exact same participant in most consecutive rounds</label>
    &nbsp
   <span id="cost_box11"> </span>
</div>
<div>
  <input type="radio" id="Q1_3" name="Q1" value="3">
  <label for="Q1_3">Fairly likely, I'll be paired with the exact same participant every other round</label>
    &nbsp&nbsp&nbsp&nbsp <span id="cost_box13"> </span>
</div>
<div>
  <input type="radio" id="Q1_2" name="Q1" value="2">
  <label for="Q1_2" >Unlikely, I'll probably won't be paired with the same participant in consecutive rounds </label>
    &nbsp&nbsp&nbsp&nbsp<span id="cost_box12"> </span>
</div>

    </div></div>
<br>
<script>
document.getElementById("Q1_1").oninput = function() {
document.getElementById("cost_box11").innerHTML='     --> That is incorrect, please try again';
cost_box11.style.color = "red";
};

document.getElementById("Q1_2").oninput = function() {
document.getElementById("cost_box12").innerHTML='     --> Correct! Chances of being paired with the same other participant in many consecutive rounds are very low';
cost_box12.style.color = "green";
document.getElementById('Q2_hide').style.display='inline';
};

document.getElementById("Q1_3").oninput = function() {
document.getElementById("cost_box13").innerHTML='     --> That is incorrect, please try again';
cost_box13.style.color = "red";
};

</script>


{# ------------------------------------------------------------- #}

<div id="Q2_hide" style="display:none">

    2. Are instructions and roles (Seller or Buyer) going to be changing throughout the experiment?
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q2_2" name="Q2" value="2"
         >
  <label for="Q2_2">No, instructions stay the same throughout the experiment</label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box22"> </span>
</div>

<div>
  <input type="radio" id="Q2_1" name="Q2" value="1">
  <label for="Q2_1">Yes, new instructions will be provided every other round</label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box21"> </span>
</div>

<div>
  <input type="radio" id="Q2_3" name="Q2" value="3">
  <label for="Q2_3">Yes, instructions change in every round</label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box23"> </span>
</div>


</div></div>
<br>

<script>
document.getElementById("Q2_1").oninput = function() {
document.getElementById("cost_box21").innerHTML='     --> That is incorrect, please try again';
cost_box21.style.color = "red";
};

document.getElementById("Q2_2").oninput = function() {
document.getElementById("cost_box22").innerHTML='     --> Correct! Instructions stay the same and are repeated in most decision screens ';
cost_box22.style.color = "green";
{# document.getElementById('Q1_hide').style.display='none'; #}
document.getElementById('Q3_hide').style.display='inline';
};

document.getElementById("Q2_3").oninput = function() {
document.getElementById("cost_box23").innerHTML='     --> That is incorrect, please try again';
cost_box23.style.color = "red";
};
</script>

{# ------------------------------------------------------------- #}


<div id="Q3_hide" style="display:none">
    3. The  Seller in each pair:
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q3_1" name="Q3" value="1"
         >
  <label for="Q3_1">Receives offers from the Buyer and decides whether to accept one of them or not</label>&nbsp&nbsp&nbsp&nbsp <br> <span id="cost_box31"> </span>
</div>

<div>
  <input type="radio" id="Q3_3" name="Q3" value="2">
  <label for="Q3_3">Sends proposals to the Buyer for them to decide whether to accept one or not   </label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box32"> </span>
</div>

<div>
  <input type="radio" id="Q3_2" name="Q3" value="3">
  <label for="Q3_2"> Both of the above </label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box33"> </span>
</div>

    </div></div>
<br>

<script>
document.getElementById("Q3_1").oninput = function() {
document.getElementById("cost_box31").innerHTML='     --> That is incorrect, please try again';
cost_box31.style.color = "red";
};

document.getElementById("Q3_2").oninput = function() {
document.getElementById("cost_box32").innerHTML='     --> Correct! Sellers receive offers but can also make proposals to the Buyer ';
cost_box32.style.color = "green";
document.getElementById('Q1_hide').style.display='none';
document.getElementById('Q4_hide').style.display='inline';
};

document.getElementById("Q3_3").oninput = function() {
document.getElementById("cost_box33").innerHTML='     --> That is incorrect, please try again';
cost_box33.style.color = "red";
};
</script>
{# ------------------------------------------------------------- #}


<div id="Q4_hide" style="display:none">
    4. Barganing between each Buyer and Seller has a maximum duration of 2 minutes. What happens if no agreement is reached before that:
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q4_1" name="Q4" value="1"
         >
  <label for="Q4_1">The last proposal made by the Buyer must be accepted </label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box41"> </span>
</div>

<div>
  <input type="radio" id="Q4_2" name="Q4" value="2">
  <label for="Q4_2">No trade takes place so there is no production and no payment</label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box42"> </span>
</div>

<div>
  <input type="radio" id="Q4_3" name="Q4" value="3">
  <label for="Q4_3">The last proposal made by the Seller must be accepted </label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box43"> </span>
</div>

    </div></div>
<br>

<script>
document.getElementById("Q4_1").oninput = function() {
document.getElementById("cost_box41").innerHTML='     --> That is incorrect, please try again';
cost_box41.style.color = "red";
};

document.getElementById("Q4_2").oninput = function() {
document.getElementById("cost_box42").innerHTML='     --> Correct! The asset value is unknown to potential Buyers, but always lies between $0 and $100 ';
cost_box42.style.color = "green";
document.getElementById('Q2_hide').style.display='none';
document.getElementById('Q5_hide').style.display='inline';
};

document.getElementById("Q4_3").oninput = function() {
document.getElementById("cost_box43").innerHTML='     --> That is incorrect, please try again';
cost_box43.style.color = "red";
};
</script>
{# ------------------------------------------------------------- #}


<div id="Q5_hide" style="display:none">
    5. In each round, Buyers can borrow money before meeting with a Seller? Why would they want to do that?
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q5_1" name="Q5" value="1"
         >
  <label for="Q5_1">To earn interest according to the prevailing interest rate</label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box51"> </span>
</div>

<div>
  <input type="radio" id="Q5_3" name="Q5" value="3">
  <label for="Q5_3">To produce output by themselves </label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box53"> </span>
</div>

<div>
  <input type="radio" id="Q5_2" name="Q5" value="2">
  <label for="Q5_2">To make proposals to Sellers who can produce output</label>&nbsp&nbsp&nbsp&nbsp<br><span id="cost_box52"> </span>
</div>

    </div></div>
<br>

<script>
document.getElementById("Q5_1").oninput = function() {
document.getElementById("cost_box51").innerHTML='     --> That is incorrect, please try again';
cost_box51.style.color = "red";
};

document.getElementById("Q5_2").oninput = function() {
document.getElementById("cost_box52").innerHTML='     --> Correct! Money borrowed by Buyers can be used for proposals and then payments to Sellers';
cost_box52.style.color = "green";
document.getElementById('Q3_hide').style.display='none';
document.getElementById('Q6_hide').style.display='inline';
};

document.getElementById("Q5_3").oninput = function() {
document.getElementById("cost_box53").innerHTML='     --> That is incorrect, please try again';
cost_box53.style.color = "red";
};
</script>
{# ------------------------------------------------------------- #}



<div id="Q6_hide" style="display:none">
    6. Can a Buyer default on his loan (fail to repay his loan)?:
    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;
     width:75%;   position: relative; left: 100px;  ">
<div>
  <input type="radio" id="Q6_2" name="Q6" value="2">
  <label for="Q6_2">No, Buyers will always be able to repay their loan </label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box62"> </span>
</div>

<div>
  <input type="radio" id="Q6_1" name="Q6" value="1">
  <label for="Q6_1">Yes, but there can be a penalty for not repaying a loan </label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box61"> </span>
</div>

<div>
  <input type="radio" id="Q6_3" name="Q6" value="3">
  <label for="Q6_3">Yes, but only if no agreement is reached during the barganing stage</label>&nbsp&nbsp&nbsp&nbsp <br><span id="cost_box63"> </span>
</div>

    </div></div>
<br>

<script>
document.getElementById("Q6_1").oninput = function() {
document.getElementById("cost_box61").innerHTML='     --> That is incorrect, please try again';
cost_box61.style.color = "red";
};

document.getElementById("Q6_2").oninput = function() {
document.getElementById("cost_box62").innerHTML='     --> Correct! Buyers receive a fix amount at the end of the period that is enough to repay their obligations';
cost_box62.style.color = "green";
document.getElementById('submit_hide').style.display='inline';
};

document.getElementById("Q6_3").oninput = function() {
document.getElementById("cost_box63").innerHTML='     --> That is incorrect, please try again';
cost_box63.style.color = "red";
};
</script>

{# ------------------------------------------------------------- #}
<div id="submit_hide" style="display:none">

<p></p><br>
{% next_button %}

</div>

{% endblock %}