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


{% block title %}
Instruction: Details on Problem Diagnosis
{% endblock %}


{% block styles %}
    <style>
        .otree-body {
            margin: auto;
<!--            max-width: 70vw;-->
        }

        .grid-container {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(13, 1fr);
            grid-gap: 0px;
            margin: auto;
            text-align: center;
            max-width: inherit;
            border-collapse: collapse;
            border: 2px solid #000000;
        }

        .header {
            background-color: #bedffd;
            grid-column: span 2;
        }

        .grid-item {
            border: 1px solid #000000;
        }

    </style>


{% endblock %}

{% block content %}
<block style="font-size:110%;">
<p>
    To perform the diagnosis, you will choose your diagnostic accuracy, ranging from 50% to 100%.
</p>

<p>
    The diagnostic accuracy determines the <u>probability that you correctly identify the client’s problem</u>.
    Below is an example:

</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>
    Example: Suppose that the client's actual problem is Problem A:
    <ul>
    <li>If you choose 50% as the diagnostic accuracy, the probability for your diagnostic result being “Problem A” is 50%, and for the other half of the probability your diagnostic result will be “Problem B”;</li>
    <li>If you choose 100% as the diagnostic accuracy, you will for sure correctly diagnose the problem as “Problem A”.</li>
    </ul>
</p>
</div>

<br>

<p>
    <b>The diagnostic accuracy is costly</b>, following the cost table in the example screenshot shown below. You should notice that a higher diagnostic accuracy is more costly for you.

<style>
img {
  border: 1px solid #555;
  width: 100%;
}
</style>
<img src="{% static "online_study/cost_table.jpg" %}"/>
</p>
<br>

<p>
    After choosing the accuracy level, the computer will generate a diagnostic result of either "Problem A" or "Problem B" with your chosen accuracy.
</p>

<p>
    After diagnosing the problem, you will recommend a solution to the client in the following automatic rule:
    <li>You will recommend "Solution A*" if your diagnostic result is Problem A.</li>
    <li>You will recommend "Solution B*" if your diagnostic result is Problem B.</li>
</p>

<br><br>

<div class="example-box">

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

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




<label for="id_expert_q1">Suppose that you chose <b>80%</b> as the diagnostic accuracy. <br><br> 1. What is the probability that you will correctly identify the problem for the client?</label>
<div style="display: flex; align-items: center;">
{% formfield player.expert_q1 %}
</div>



<label for="id_expert_q2">2. How many tokens do you need to pay for this diagnosis?</label>
<div style="display: flex; align-items: center;">
{% formfield player.expert_q2 %}
</div>

</div>
<br>
<p>If you are clear about the information above, please click "Next" to proceed to the next page for the information about how you can earn extra bonus from diagnosis and problem solving. </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 %}