{% extends "global/SimplePage.html" %}
{% load staticfiles otree_tags %}
{% load static %}

{% block title %}
Practice Round 1
{% endblock %}

{% block content %}
<div class="card bg-light instructions">
    <p style="padding-left: 5pt">
        This is <b>Practice Round - You will not earn any reward for this</b>
    </p>

    <p style="padding-left: 5pt">
        <strong>1. Please answer the question below:</strong> <br>
        <form id="practiceForm" method="post">
            {% csrf_token %}
            <label for="inputValue">Enter a value:</label>
            <input type="number" id="inputValue" min="0" max="100" required>
            <button type="button" onclick="processValue()">Submit</button>
        </form>
    </p>

    <div id="responseSection" style="display: none;">
        <p class="fade-in" style="padding-left: 5pt">
            <strong>2. Other participants submit responses:</strong> <br>
            Other participants reported the chances that it will rain tomorrow.<br><br>
        </p>
        <p id="avgResponse" class="fade-in" style="padding-left: 5pt; color: red;">
    <i><b>Most people believe there is a {{ avg_response }}% chance of rain tomorrow</b></i>
</p>
<br>

<p class="fade-in" style="padding-left: 5pt">
    <strong>3. Comparison:</strong> If the difference between Mr. X's response and the average is smaller than a randomly chosen number, Mr. X qualifies for the £1 bonus reward. Otherwise, Mr. X earns 0 points.
</p>
<br><br><br>
<div class="fade-in" style="width: 100%; height: 50px; position: relative;">
    <div style="position: absolute; top: 0; left: 0; right: 0; height: 10px; background-color: #0056b3;"></div>
    <div style="position: absolute; top: -5px; left: calc(6% - 5px); width: 20px; height: 20px; border-radius: 50%; background-color: #f00;"></div>
    <div style="position: absolute; top: -5px; left: calc(82% - 5px); width: 20px; height: 20px; border-radius: 50%; background-color: #f00;"></div>
    <div style="position: absolute; top: -60px; left: calc(3% - 5px); font-size: 16px;"><span id="inputValueDisplay"></span></div>
    <div style="position: absolute; top: -40px; left: calc(3% - 5px); font-size: 16px;">(Your belief about most people's prediction)</div>
    <div style="position: absolute; top: -60px; left: calc(62% - 5px); font-size: 16px;">(Most people's actual prediction of rain tomorrow)</div>
    <div style="position: absolute; top: -80px; left: calc(82% - 5px); font-size: 16px;">{{ avg_response }}% </div>
    <div style="position: absolute; top: 5px; left: calc(6% + 82% / 2 - 5px); font-size: 20px; color: #f00;">&darr;</div>
    <div style="position: absolute; top: 40px; left: calc(6% - 2px); width: calc(82% + 4px); height: 5px; background-color: #f00;"></div>
    <div style="position: absolute; top: 50px; left: calc(34% - 10px); font-size: 16px; color: #f00;">Difference (<span id="differenceDisplay"></span>%)</div>
</div>

        <br><br>

        <p class="fade-in" style="padding-left: 5pt">
            <i><b>Randomly chosen number is <span style="color: red">{{ random_number }}</span></b></i>
        </p>

        <div class="fade-in" style="padding-left: 5pt">
            <div id="messageSection"></div>
            </div>

        <br><br>

        <p class="fade-in" style="padding-left: 5pt">
            Remember, the closer Mr X's belief aligns with the average belief, the higher Mr X's chances of earning the additional £2 reward.
        </p>
    </div>

    <script>
    function processValue() {
        var inputValue = document.getElementById("inputValue").value;
        var responseSection = document.getElementById("responseSection");
        var avgResponse = document.getElementById("avgResponse");
        var difference = Math.abs(inputValue - {{avg_response}});
        var differenceDisplay = document.getElementById("differenceDisplay");
        differenceDisplay.textContent = difference;
        var random_number = {{random_number}};

        document.getElementById("inputValue").readOnly = true; // Disable editing after submission
        document.getElementById("inputValue").disabled = true; // Disable editing after submission
        document.getElementById("inputValue").style.backgroundColor = "#f5f5f5"; // Change background color to indicate it's not editable
        document.getElementById("inputValue").style.cursor = "default"; // Change cursor style to default
        document.getElementById("inputValue").style.border = "none"; // Remove border
        document.getElementById("inputValue").style.outline = "none"; // Remove outline

        var inputValueDisplay = document.getElementById("inputValueDisplay");
        inputValueDisplay.textContent = inputValue + "%";
        // Display the response section gradually
        responseSection.style.display = "block";
        responseSection.classList.add("fade-in");

        // Set the participant value
        var participantValue = document.getElementById("participantValue");
        participantValue.innerHTML = inputValue;

        // Disable the input field
        document.getElementById("inputValue").disabled = true;

        if (difference < random_number) {
            // Difference is smaller than the randomly chosen number
            // Display the message for this condition
            document.getElementById("messageSection").innerHTML = "<p style='color: red'><b>Difference is smaller than the randomly chosen number. You win 100 points.</b></p>";
        } else {
            // Difference is greater than or equal to the randomly chosen number
            // Display the message for this condition
            document.getElementById("messageSection").innerHTML = "<p style='color: red'><b>Difference is greater than or equal to the randomly chosen number. You win 0 points.</b></p>";
        }

        // Show the next button
         var nextButton = document.getElementById("nextButton");
        nextButton.style.display = "block";

    }
</script>
<div style="text-align: center; margin-top: 20px;">
    {% include "global/ButtonNext.html" with button_text="Next" %}
</div>

{% endblock %}