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


{% block title %}
Instruction: Information on Your Matched Client
{% endblock %}

{% block content %}
<block style="font-size:110%;">

<p>
    Your matched client is a hypothetical person.
    We have conducted a similar study previously where we collected data from some real people playing the role of the client.
    Based on their decision data, we construct the decision for your matched simulated client.
    Your client will behave like these previous participants actually behaved.
</p>

<p>
    <b>
        Therefore, your best strategy is to treat your client as if you are interacting with a real person and carefully
        consider how this person may react while you are making your choice of the diagnostic accuracy.
    </b>
</p>

<br>

<p>
    Below are more details about the client.
</p>

<p>
    The client’s goal is to solve his/her problem. The client will receive:
<ul>
    <li>120 tokens if problem is solved;</li>
    <li>20 tokens if problem is not solved.</li>
    </ul>

</p>

<p>
    <b>For every round, your client will {% if player.treatment == 1 %} NOT {% endif %} observe your diagnostic accuracy.</b>
    <br>
    And your client will always observe your diagnostic result and your recommendation of solution.
</p>

<p>
    For each round, your client may be one of the two types, with equal chances:
<ul>
    <li>
        <b>PASSIVE client</b>. This type of client will always follow your recommendation of solution.
    </li>
    <br>
    <li>
        <b>ACTIVE client</b>. This type of client, may or may NOT follow your recommendation.
    <ul>
        <li>
            An active client will consider whether to follow your diagnosis or not;
        </li>
        <li>
            If the active client chooses not to follow you, then he/she will just choose the solution that is opposite to your recommendation (e.g. you recommend Solution A* but this client chooses to receive Solution B*).
        </li>
        <li> This active client already performs a self-diagnosis with a diagnostic accuracy of 60%.
                For example, this client may already self-diagnose herself/himself as having Problem A and desiring Solution A*,
                but this self-diagnosis is correct only 60% of the time, i.e. there is still 40% of chance that the actual problem is Problem B and the desired solution is Solution B*;
        </li>
        <li>
            You should be aware that the active client may hold opinions about the problem and desired solution that are DIFFERENT from yours.
        </li>

    </ul>
    </li>
</ul>
</p>





<style>
        .example-box {
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
    </style>
<div class="example-box">

<p>
    <b>Challenge Question</b>
</p>

<p>
    Based the information above, please answer the questions below.
</p>

<p>
<label for="id_expert_q3">Which of the statement below is correct?</label>
<div style="display: flex; align-items: center;">
{% formfield player.expert_q3 %}<span></span>
</div>
</p>

<p>
<label for="id_expert_q4">Suppose you are matched with an ACTIVE client. Which of the statement below is correct?</label>
<div style="display: flex; align-items: center;">
{% formfield player.expert_q4 %}<span></span>
</div>
</p>

</div>

<br>
<p>If you are clear about the information above, please click "Next" to proceed to the next page for a summary of the whole game.</p>
<div id="hidden-container">
        <input type="hidden" name="qual_check" id="qual_check" value="1" />
    </div>
    {% next_button %}


{% endblock %}



{% block scripts %}
<!--    <script>-->
<!--    var time_thres = 3000;-->

<!--    $(document).ready(function(){-->
<!--        var start_time = new Date().getTime();-->
<!--        $(".otree-btn-next").click(function() {-->
<!--            var end_time = new Date().getTime();-->
<!--            var diff = end_time - start_time;-->
<!--            if (end_time - start_time < time_thres) {-->
<!--                $("#qual_check").val(0);-->
<!--            }-->
<!--        });-->
<!--    });-->
<!--    </script>-->
{% endblock %}