{% 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 1
{% 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 %}
    {% formfield player.expert_q1 %}


    <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>
        Diagnostic accuracy defines the probability of a diagnosis being correct. <br>
        So, if the diagnostic accuracy is 80%, it means that there is a 80% of chance that you correctly identify the problem. <br>
        Based on this diagnostic accuracy, if the diagnostic result is “Problem A”, then the client’s problem is “Problem A” with a 80% of chance.
        And with 20% of chance, the actual problem is "Problem B".</p>
    </div>


{% endif %}

{% if player.id_in_group == 2 %}

Suppose you see the following page. <br>
<p>
    <style>
img {
  border: 1px solid #555;
    width: 70%;
}
</style>
    {% if player.activeness == 1 %}
<img src="{% static "Graph_22fall/choose_treatment_active_concealed.png" %}"/>
    {% endif %}

    {% if player.activeness == 0 %}
<img src="{% static "Graph_22fall/choose_treatment_passive_concealed.png" %}"/>
    {% endif %}
</p>
<p>
(i) The probability of my own signal being correct is 60%.<br>
(ii) The probability of my own signal being correct is 40%.<br>
(iii) I guess that the probability of the expert’s diagnosis being correct is 100%.<br>
(iv) I guess that the probability of the expert’s diagnosis being correct is 50%.<br>
</p>
<p>Which statements above are true?</p>
    {% formfield player.client_q1 %}


    <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>
      <p>
        From this example screenshot, the accuracy of your signal is 60% (second row of the top table). Also, you should notice that the accuracy of your own signal is always 60%.<br>
          And in this example, you guess that the expert’s diagnostic accuracy is 50% (Notice that this is a guess, rather than a fact).<br>
          So, statement (i) and statement (iv) are correct.</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 %}