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

{% block title %}
Part 3 - Comprehension Questions (1 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>
    label {
      position:relative;
      padding-left:2.5ch;
      display: block;
      margin-left: 5px;
      margin-bottom: 10px;
      font-size: 17pt
    }

    label > [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>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}

<br>
<p>
    To make sure you understand the instructions, please answer the following questions.</p>
<p>
    Suppose you state that you are willing to pay up to 70 ECU for the information of your choice.
    Which of the following statements is correct?
</p>
<div>
    <label>
        <input type="radio" name="comprehension_1" value="1" id="radio1"/> &nbsp;
        I will definitely pay 70 ECU for the information.
    </label>
    <label>
        <input type="radio" name="comprehension_1" value="2" id="radio2"/> &nbsp;
        The computer will randomly draw a price between 0 ECU and {{Constants.WTP_endowment}} ECU.
        Whether or not I receive the information, and how much I pay for it, will depend on the price that the computer randomly draws.
    </label><br>
</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_1" id="comp_attempts_1" />
<script>
    $(document).ready(function(){
      $("#Confirm").click(function() {
        checkcorrect();
      });
    });
</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>
    let attempts_comp1 = 0
    document.getElementById('comp_attempts_1').value = 0
    function checkcorrect() {
        var radioValue = $("input[name='comprehension_1']:checked").val();
          if (radioValue == 1) {
            document.getElementById('WrongAnswer').style.display = 'block';
            attempts_comp1 += 1
          } else if (radioValue == 2) {
            document.getElementById('WrongAnswer').style.display = 'none';
            document.getElementById('CorrectAnswer').style.display = 'block';
          }
        document.getElementById('comp_attempts_1').value = attempts_comp1 + 1
    }
</script>
<script>
    $(document).ready(function(){
      $('input[name=comprehension_1]').on('input', function() {
        document.getElementById('CorrectAnswer').style.display = 'none';
        document.getElementById('WrongAnswer').style.display = 'none';
      });
    });
</script>
<br>
<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 will randomly draw a price between 0 ECU and {{Constants.WTP_endowment}} ECU.
        Whether or not you receive the information, and how much you pay for it, will depend on the price that the computer randomly draws. </p>
    <p>Please try again.</p>
</span>
<div class="block">
    <div id="CorrectAnswer" style="display:none;">
        <p>
            Your answer is 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>
<br>

{{ endblock }}