{% 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;}
    #myDIV2 {
    padding: 20px 20px;
    text-align: left;
    background-color: lightblue;
    margin-top: 20px;
    }
    #myDIV3 {
    padding: 20px 20px;
    text-align: left;
    background-color: lightblue;
    margin-top: 20px;
    }
</style>
{% endblock %}

{% block title %}
Question 2
{% 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_q2 %} </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>
    <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>
          If you choose 60%, then it costs you 1 token.</p>
    </div>



<br><br><br>
<p>{% formfield player.expert_q3 %}</p>
<br>
    <p>Click the "Show hint" button to see hint:</p>

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

    <div id="myDIV2" style="display: none;">
      <p>
          Your assigned contract is the
          {% if player.expert_altruism == 1 %} <b>100-Contract</b>. This means that if your matched client's problem is solved, you will receive extra <b>100 tokens</b>.{% endif %}
          {% if player.expert_altruism == 0.6 %} <b>60-Contract</b>. This means that if your matched client's problem is solved, you will receive extra <b>60 tokens</b>. {% endif %}
          {% if player.expert_altruism == 0.2 %} <b>20-Contract</b>. This means that if your matched client's problem is solved, you will receive extra <b>20 tokens</b>. {% endif %}
          {% if player.expert_altruism == 0 %} <b>0-Contract</b>. This means that if your matched client's problem is solved, you will receive extra <b>0 tokens</b>. {% endif %}
      </p>
    </div>
{% endif %}

{% if player.id_in_group == 2 %}


You are assigned as {% if player.activeness == 1 %} an ACTIVE {% endif %} {% if player.activeness == 0 %} a PASSIVE {% endif %} client.
Which of the following statement is true? <br>

    {% formfield player.client_q2 %}


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

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

    <div id="myDIV3" style="display: none;">
      <p>
        {% if player.activeness == 1 %} As an ACTIVE client, you will need to choose the solution by yourself.
          Your private signal and the expert's diagnosis are the information sources for you to guess your actual problem and the corresponding solution.{% endif %}
          {% if player.activeness == 0 %} As a PASSIVE client, the expert will choose the solution for you.
          You will guess whether the expert successfully solve your problem.
          A successful guess in a round will bring you additional 10 tokens of payoff,
          if this round is randomly chosen for the final payment.{% endif %}</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>

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



{% endblock %}