{% 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 {% if player.id_in_group == 1 %}3 {% else %}2{% endif %}
{% 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 never observe my choice of diagnostic accuracy."</b></p>
<p>{% formfield player.expert_q4 %}</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>
          After choosing your diagnostic accuracy, your matched client will only receive the diagnostic result but not the
          diagnostic accuracy that you choose. So this statement is TRUE - the diagnostic accuracy is NOT observable to the client.

      </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 the solution that you recommend to him/her.
      </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>
<script>
    function myFunction3() {
      var x = document.getElementById("myDIV3");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
</script>


{% endblock %}