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

{% block title %}
Part 3 - Comprehension Questions (3 of 4)
{% endblock %}

{% block content %}
<hr>

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
        text-align: center
    }
    input[type=radio]:checked + label {
          font-style: normal;
          color: rgb(56,110,246);
          border: 1px solid rgb(56,110,246);
          background-color: rgb(226,233,253)
        }
    }
</style>
<style>
    .checkboxgroup {
    display: inline-block;
    text-align: center;
      margin-top: 7px
    }
     .checkboxgroup input[type='radio'] {
        height: 17px;
        width: 17px;
        vertical-align: middle;
    }
    .checkboxgroup button {
      display: block;
      margin-bottom: 7px;
      font-size: 14px
    }
    .div1 {
      float: left;
      text-align: left;
    }
    .div2 {
      float:right;
      text-align: right;
    }
    .main {
      width:90%
    }
</style>
<style>
    label1 {
      position:relative;
      padding-left:2.5ch;
      display: block;
      margin-left: 5px;
      margin-bottom: 10px;
      font-size: 17pt
    }

    label1 > [type=radio] {
      left: 0;
      height: 20px;
      width: 20px;
      vertical-align: middle;
    }
</style>
<style>
  .slidecontainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
    }
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 100%;
      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;
    }
    .vranger {
       margin-top: 50px;
       transform: rotate(270deg);
      -moz-transform: rotate(270deg); /*do same for other browsers if required*/
    }
</style>
<style>
/* The checkcontainer */
    .checkcontainer {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-top: 3px;
      margin-bottom: 0px;
      cursor: pointer;
      font-size: 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    /* Hide the browser's default checkbox */
    .checkcontainer input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 15px;
      width: 15px;
      background-color: #eee;
    }
    /* On mouse-over, add a grey background color */
    .checkcontainer:hover input ~ .checkmark {
      background-color: #ccc;
    }
    /* When the checkbox is checked, add a green background */
    .checkcontainer input:checked ~ .checkmark {
      background-color: #4CAF50;
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    /* Show the checkmark when checked */
    .checkcontainer input:checked ~ .checkmark:after {
      display: block;
    }
    /* Style the checkmark/indicator */
    .checkcontainer .checkmark:after {
      left: 5px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
</style>
<style>
    aside  {
      width: 600px;
      height: 530px;
      background: none;
      overflow:auto;
      min-height: 0;
      transition-property: width;
      transition-duration: 0.2s;
      transition-timing-function: linear;
    }
    row {
          width: 40%;
    }
    * {
      box-sizing: border-box;
    }
    /* Create two unequal columns that floats next to each other */
    .column {
      float: left;
      padding: 10px;
    }
    .left {
      width: 40%;
    }
    .right {
      width: 60%;
    }
</style>
<style>
    .table {
        font-size: 15px
    }
    .table td{
        padding: 1px
    }
</style>
<style>
    input[type=number] {
          width: 30%;
          padding: 2px 2px;
          margin: 2px 0;
        }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}
<br>

<p>
    Suppose you state that you are willing to pay up to 70 ECU for the information of your choice.
</p>
<p>
    If the computer randomly draws a price of 80 ECU, will you receive the information?
</p>
<div>
    <label1>
        <input type="radio" name="comprehension_3" value="1" id="radio1"/> &nbsp;
            Yes
    </label1>
    <label1>
        <input type="radio" name="comprehension_3" value="2" id="radio2"/> &nbsp;
            No
    </label1>
</div>
<br>
<p>
    How many ECU will you pay?
</p>
<div>
    <label>Please fill in a number between 0 and {{Constants.WTP_endowment}}. </label> <br>
    <input id="comprehension_4" type="number" name="comprehension_4">
</div>
<br>
{{ if player.participant.treatment == 1 }}
    <p>
        You can find a copy of the instructions
        <a href="https://docs.google.com/document/d/10BdiBGPScvOM1KovYeAoEWmsslJTzyqL-sU8mKdImMc/edit?usp=sharing" target="_blank" rel="noopener noreferrer">here</a>.
    </p>
{{ else }}
    <p>
        You can find a copy of the instructions
        <a href="https://docs.google.com/document/d/1easLEFQp-za9f-1kITYDcv-otAQ7yTQCI4prcAhuqS8/edit?usp=sharing" target="_blank" rel="noopener noreferrer">here</a>.
    </p>
{{ endif }}

<input type="hidden" name="comp_attempts_3" id="comp_attempts_3" />

<script>
    $(document).ready(function(){
      $("#Confirm").click(function() {
        checkcorrect();
        checkrange();
      });
    });
</script>
<script>
    let attempts_comp3 = 0
    document.getElementById('comp_attempts_3').value = 0
    function checkcorrect() {
        var radioValue = $("input[name='comprehension_3']:checked").val();
        var inputValue = $("#comprehension_4").val();
          if (radioValue == 2 && inputValue == 0 && inputValue.length != 0) {
            document.getElementById('WrongAnswer').style.display = 'none';
            document.getElementById('CorrectAnswer').style.display = 'block';
            document.getElementById('Fillinanswer').style.display = 'none';
          } else if ((radioValue.length != 0 && radioValue != 2) && (inputValue != 0 && inputValue.length != 0)) {
            document.getElementById('WrongAnswer').style.display = 'block';
            document.getElementById('CorrectAnswer').style.display = 'none';
            document.getElementById('Fillinanswer').style.display = 'none';
            attempts_comp3 += 1
          } else if ((radioValue.length != 0 && radioValue == 2) && (inputValue != 0 && inputValue.length != 0)) {
            document.getElementById('WrongAnswer').style.display = 'block';
            document.getElementById('CorrectAnswer').style.display = 'none';
            document.getElementById('Fillinanswer').style.display = 'none';
            attempts_comp3 += 1
          } else if ((radioValue.length != 0 && radioValue != 2) && (inputValue == 0 && inputValue.length != 0)) {
            document.getElementById('WrongAnswer').style.display = 'block';
            document.getElementById('CorrectAnswer').style.display = 'none';
            document.getElementById('Fillinanswer').style.display = 'none';
            attempts_comp3 += 1
          } else if ((inputValue.length == 0) || (radioValue.length == 0)) {
            document.getElementById('Fillinanswer').style.display = 'block';
          }
        document.getElementById('comp_attempts_3').value = attempts_comp3 + 1
    }
</script>
<script>
    var el1 = document.getElementById("radio1");
    el1.addEventListener("keypress", function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
      }
    });
</script>
<script>
    var el2 = document.getElementById("radio2");
    el2.addEventListener("keypress", function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
      }
    });
</script>
<script>
    var el3 = document.getElementById("comprehension_3");
    el3.addEventListener("keypress", function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
      }
    });
</script>
<script>
    var el2 = document.getElementById("comprehension_4");
    el2.addEventListener("keypress", function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
      }
    });
</script>
<script>
    $(document).ready(function(){
      $('input[name=comprehension_3]').on('input', function() {
        document.getElementById('CorrectAnswer').style.display = 'none';
        document.getElementById('WrongAnswer').style.display = 'none';
        document.getElementById('Fillinanswer').style.display = 'none';
      });
      $('input[name=comprehension_4]').on('input', function() {
        document.getElementById('CorrectAnswer').style.display = 'none';
        document.getElementById('WrongAnswer').style.display = 'none';
        document.getElementById('Fillinanswer').style.display = 'none';
      });
    });
</script>

<center>
        <button id="Confirm" type="button" class="btn btn-success" style="display:block;">Check Answer</button>
</center>
<br>
<br>
<span id="WrongAnswer" style="width: 60%; display:none; color: red; margin-top: 10px; font-size: 20px;">
    <p>Your answer is incorrect.</p>
    <p>The computer drew a price of 80 ECU, which is greater than the highest amount you are willing to pay (70 ECU).</p>
    <p>Hence, you will not receive the information, and you will not have to pay anything.</p>
    <p>Please try again.</p>
</span>
<center>
    <span id="Fillinanswer" style="width: 60%; display:none; color: red; margin-top: 10px; font-size: 20px;">
    Please answer all the questions.
</span>
</center>
<div class="block">
    <div id="CorrectAnswer" style="display:none;">
        <p>
            Your answers are correct. Please click "Next" to proceed.
        </p>
        <br>
        <br>
        <button id="Next" style="display:block; float:right" class="btn btn-primary">Next</button>
    </div>
</div>
<br>


<br>

{{ endblock }}