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

{% block styles %}
<style>
  .otree-form-errors {
    visibility: hidden;
    display: none;
    }
    #myDIV {
    padding: 20px 20px;
    text-align: left;
    background-color: lightblue;
    margin-top: 20px;
    }
</style>
{% endblock %}

{% block title %}
Question 3
{% endblock %}



{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Your answer is not correct.</h4>
  <p>Please enter a new answer.</p>
</div>
{% endif %}

{% block content %}

{% if player.id_in_group == 1 %}
<p>{% formfield player.expert_q3_1 %}</p>
<p>{% formfield player.expert_q3_2 %}</p>

<p>Please refer to this cost table:</p>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #858482;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #F5F5F5;
}
</style>
<p>
<table>
    <tr>
      <th>Diagnostic Accuracy</th>
      <th>50%</th>
      <th>60%</th>
      <th>70%</th>
      <th>80%</th>
      <th>90%</th>
      <th>100%</th>
    </tr>
    <tr>
      <th>Cost of diagnosis in tokens</th>
      <th>0</th>
      <th>1</th>
      <th>4</th>
      <th>8</th>
      <th>16</th>
      <th>25</th>
    </tr>
</table>
</p>
<br><br>
    <p>Click the "Show hint" button to see hint:</p>

    <button type="button" onclick="myFunction()">Show hint</button>

    <div id="myDIV" style="display: none;">
      <p>
          You receive 120 tokens for each round. <br>If you choose 60%, then it costs you 1 token, and your income from this round is:
          120 – 1 = 119. <br>If you choose 90%, then it costs you 16 tokens, and your income from this round is: 120 – 16 = 104.</p>
    </div>


{% endif %}

{% if player.id_in_group == 2 %}
<!--    {% if form.errors %}-->
<!--    <div class="alert alert-danger" role="alert">-->
<!--      <h4 class="alert-heading">Your answer is not correct.</h4>-->
<!--      <p>Please enter a new answer.</p>-->
<!--    </div>-->
<!--    {% endif %}-->

Suppose you see the following result table. <br>
<p>
    <style>
img {
  border: 1px solid #555;
}
</style>
<img src="{% static "observable/Result_client1 - fewWTP.PNG" %}"/>
</p>
<p>

</p>
<p>What will be your payment for this round?</p>
    {% formfield player.client_q3 %}


    <p>Click the "Show hint" button to see hint:</p>

    <button type="button" onclick="myFunction()">Show hint</button>

    <div id="myDIV" style="display: none;">
      <p>In this example screenshot, the option randomly chosen by the computer is “Make own decision & pay 10 tokens”.
          So your income will be deducted by 10 tokens. And in this round, the problem is successfully solved,
          so you receive 120 tokens. Your total income is: 120 - 10 = 110 tokens.</p>

    </div>
{% endif %}


<br><br>
    {% next_button %}





<script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
</script>



{% endblock %}