{{ block title }} {{ endblock }}
{{ block content }}
<style>
.otree-timer {
display: none;
}
</style>

<script>

    setTimeout(function() {
            const nextButton = document.getElementById('next-button');
            nextButton.removeAttribute('disabled');
        }, 30000); // 30 seconds

</script>


    <p>
    Please take a moment to reflect on your expected performance in the upcoming bargaining tasks.
    Think about how you will rank compared to 100 other participants who will perform the same bargaining task.
    The performance ranking is thereby determined solely by your final earnings in the game.
    <!--You will achieve high earnings—and thus a higher ranking—if you outperform the other participants in terms of financial gains.-->
    </p>

    <p>
    Please answer the following questions.
    <br>
    <br>
    <br>
    How many of the 100 participants do you think you will outperform in terms of bargaining?
    <br>
    Please provide a number between 0 and 100.
    <div style="display: flex; align-items: center;">
    <input type="range" name="myguess1" min="0" max="100" oninput="updateDescription(this)">
    <p id="description" style="margin-left: 20px;"></p>
    </div>

    <script>
        let description = document.getElementById('description');
        function updateDescription(input) {
            let myguess1 = parseInt(input.value);
            description.innerText = `${myguess1}`
        }
    </script>

    <br>
    <br>
    How confident are you in the accuracy of your guesses?
    <br>
    Please provide a percentage representing your confidence, between 0 and 100%.
    <br>
    <div style="display: flex; align-items: center;">
    <input type="range" name="myconfidence1" min="0" max="100" oninput="updateDescription2(this)">
    <p id="description2" style="margin-left: 20px;"></p>
    </div>

    <script>
        let description2 = document.getElementById('description2');
        function updateDescription2(input) {
            let myconfidence1 = parseInt(input.value);
            description2.innerText = `${myconfidence1}`
        }
    </script>

    <!-- <br>
    <br>
    Considering your initial estimate, what's the minimum number of participants you think you could outperform?
    <br>
    This number should be equal to or less than your original prediction.
    <br>
    (Check the example below for guidance.*)
    <br>
    <div style="display: flex; align-items: center;">
    <input type="range" name="mylowerbound1" min="0" max="100" oninput="updateDescription3(this)">
    <p id="description3" style="margin-left: 20px;"></p>
    </div>

    <script>
        let description3 = document.getElementById('description3');
        function updateDescription3(input) {
            let mylowerbound1 = parseInt(input.value);
            description3.innerText = `${mylowerbound1}`
        }
    </script>

    <br>
    <br>
    Considering your initial estimate, what's the maximum number of participants you think you could outperform?
    <br>
    This number should be equal to or more than your original prediction.
    <br>
    (Check the example below for guidance.*)
    <br>
    <div style="display: flex; align-items: center;">
    <input type="range" name="myupperbound1" min="0" max="100" oninput="updateDescription4(this)">
    <p id="description4" style="margin-left: 20px;"></p>
    </div>

    <script>
        let description4 = document.getElementById('description4');
        function updateDescription4(input) {
            let myupperbound1 = parseInt(input.value);
            description4.innerText = `${myupperbound1}`
        }
    </script>
    -->
    <br>
    <br>
    How satisfied do you think you will be with the experiment result?
    <br>
    0 - Not Satisfied At All |------------------------| 100 - Completely Satisfied
    <br>
    <div style="display: flex; align-items: center;">
    <input type="range" name="mysatisfaction1" min="0" max="100" oninput="updateDescription5(this)">
    <p id="description5" style="margin-left: 20px;"></p>
    </div>

    <script>
        let description5 = document.getElementById('description5');
        function updateDescription5(input) {
            let mysatisfaction1 = parseInt(input.value);
            description5.innerText = `${mysatisfaction1}`
        }
    </script>
    <!--{{ formfields }}-->

    <br>
    <br>
    <p>
    <!-- *Example for Clarity:
    <br>
    For your performance prediction, set both a minimum and maximum estimate. If you expect to outperform "X" participants initially, your minimum estimate should be less than or equal to X, and your maximum estimate should be greater than or equal to X.

    </p>
    -->
<button id="next-button" disabled="disabled">Next</button> <!-- Disable the Next button by default -->

{{ endblock }}