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

{% block title %}
    Material Error Probability Prediction Task
{% endblock %}

{% block content %}

    <div class="card bg-light m-3">
        <div class="card-body">
            <p>
                <b>If your client's file is audited</b>, what do you believe is the <strong>probability (0-100%)</strong> that a
                <b>material error</b> will be found by the regulator in this round?
            </p>
              <p style="color: red;">Note that you can earn up to 5000 extra LabRands if your answer is close to the correct answer.</p>

            <div class="mb-4 mt-4">
                <label for="beliefSliderM" class="form-label">Move the slider to indicate your belief:</label>
                <input type="range" class="form-range" name="beliefM" min="0" max="100" step="1"
                       id="beliefSliderM" value="50" oninput="updateProbability(this.value)">
                
                <div class="d-flex justify-content-between">
                    <span>0% (Impossible)</span>
                    <span>50%</span>
                    <span>100% (Certain)</span>
                </div>
            </div>

            <div class="alert alert-primary text-center">
                <strong>Your Prediction:</strong> <span id="beliefValueM">50</span>%<br>
            </div>
            

        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center">
    <div id="tech-explanation" class="mt-3 p-3 border rounded bg-white">
        <h5>How your payment is calculated:</h5>
        <p>
            We use a <strong>Binarized Scoring Rule</strong>. Your prediction is used to calculate an "error score." The closer your prediction is to the true likelihood, the lower the error score.
            The computer then draws a random number between 0 and 1.
            If your error score is <em>less</em> than that random number, you win the prize. Making your error as small as possible maximises your chance of winning.
        </p>
        <p>
            <strong>Mathematically:</strong> This mechanism is "incentive compatible." This means that your
            expected earnings are highest when you report your <strong>true belief</strong>.
            There is no way to "game" the system; being honest is your best strategy.
        </p>
    </div>
    <div>
        {% next_button %}
    </div>



    <script>
        // Initial call to set starting values
        window.onload = function() {
            updateProbability(document.getElementById('beliefSliderM').value);
        };

        function updateProbability(val) {
            // Update the text display for the slider value
            document.getElementById("beliefValueM").innerText = val;
            
            // Calculate Quadratic Loss Logic: 1 - (1 - r)^2
            // We assume theta = 1 (audit happens) for the display
            let r = val / 100;
            let winProb = (1 - Math.pow(1 - r, 2)) * 100;
            
            // Display win probability rounded to 1 decimal place
            document.getElementById("winProb").innerText = winProb.toFixed(1);
        }


    </script>

{% endblock %}