{% 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;
    }
</style>
{% endblock %}

{% block title %}
Question 4
{% 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>Is the following statement True or False?</p>
<p><b>"The client will not observe my choice of diagnostic accuracy."</b></p>
<p>{% formfield player.expert_q5 %}</p>
    <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>
          According to the instruction, after choosing your diagnostic accuracy, your matched client will receive both the diagnostic result and the
          diagnostic accuracy that you choose. So this statement is FALSE - your client CAN see the diagnostic accuracy.

      </p>
    </div>

<br><br><br>

<p>{% formfield player.expert_q5 %}</p>


    <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>
          "Active" means that the client will be able to make his/her own choice of solution after seeing your
          recommended solution, i.e., he/she has a chance to go against you and choose the opposite solution. <br>
          "Passive" means that the client will always follow whatever you recommend for him/her.
      </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 %}