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

{% block title %}
    Control Questions
{% endblock %}

{% block head %}
    <style>
        .employee-announcement {
            text-align: center;
            font-size: 24px; /* Adjust the font size as needed */
        }
        /* ... other styles ... */

        ul {
            list-style-position: inside;
            padding-left: 0; /* Remove default padding */
        }
        li {
            text-indent: -1em; /* Adjusts the indent of the text */
            padding-left: 1em; /* Adds padding to align with the text above */
        }
        .calculation-box {
            border: 1px solid black;
            padding: 0.5rem;
            margin: 1rem 0;
            font-weight: bold;
        }
        .calculation-title {
            text-align: center; /* Align the title to the left */
            margin-bottom: 0.25rem; /* A little space below the title */
            display: block; /* Ensure the title is on its own line */
        }
        .calculation-content {
            text-align: center; /* Center the content */
            display: block; /* Ensure the content is on its own line */
        }
        .stage-title {
            text-align: center;
            font-weight: bold;
            display: block;
            margin-top: 20px; /* Adjust as needed */
        }
        .stage-description {
            margin-top: 5px; /* Adjust as needed */
            text-align: justify;
        }

    </style>

{% endblock %}

{% block content %}
<style>
    /* draws line between table rows */
    th, td{
        border-bottom: 1px solid #ddd;
    }
</style>

<div class="alert alert-danger" id="error_message" style="visibility: hidden"></div>
<div class="card bg-light instructions">
<div class="card-body">
    <i>If you are unsure, you can have a look at the instructions again by scrolling down and clicking on the
        "Show/Hide Instructions" button.</i>
    <br>
        <br>

<form method="post">
    <input type="hidden" name="counter_wrong" id="counter_wrong" value="0">

    <!-- Control Question 1 -->
    <span style="font-size: medium; "><b>Control Question 1</b></span>
        <br>    <br>
    <p>Assume that the CEO decides <b>not</b> to force the supervisors to set the minimum transfer of 5.</p>

    <span style="font-size: medium; ">a) What choice does the supervisor have in selecting the minimum transfer for her/his assigned employee in this case?</span>
    <br>
    <table>
        <tr>
            <td><label>
                <input type="radio" name="ControlQ1" value="0">
            </label></td>
            <td>No choice</td>
        </tr>
        <tr>
            <td><input type="radio" name="ControlQ1" value="0"></td>
            <td>The choice whether or not to set a minimum transfer of 5 points for her/his employee or whether or not to let the employee decide completely freely about her/his transfer.</td>
        </tr>
    </table>
    <br>
    <br>
    Suppose a supervisor decides <b>not</b> to set a minimum transfer for his/her employee.
    <br>
    <br>
    <span style="font-size: medium; ">b) The employee assigned to this supervisor decides to transfer 5 points. What income results from this transfer?</span>
    <br>
    <table>
        <tr>
            <td>Points for the Employee:</td>
            <td><input type="float" name="ControlQ11" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="float" name="ControlQ12" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="float" name="ControlQ13" value="" min="0" max="1000000"></td>
        </tr>
    </table>
    <br>
    <br>
    <span style="font-size: medium; ">c) Assume the three other employees transfer 20 points each. What is the total income of the CEO?</span> <br>
    <br>
    <table>
        <tr>
            <td> <span style="font-size: medium; ">Total Income for the CEO: </span> </td>
            <td><input type="float" name="ControlQ14" id="ControlQ14" value="" min="0" max="1000000"></td>
        </tr>
    </table>
    <br>
    <br>
    <span style="font-size: medium; ">d) Now suppose the employee assigned to this supervisor decides to transfer 20 points. What income results from this transfer (ignoring the other supervisor-employee pairs)?</span>
    <br>
    <br>
    <table>
        <tr>
            <td>Points for the Employee:</td>
            <td><input type="float" name="ControlQ2" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="float" name="ControlQ21" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="float" name="ControlQ22" value="" min="0" max="1000000"></td>
        </tr>
    </table>
    <br>
    </table>
    <br>
    <span style="font-size: medium; ">e) Assume that the total transfer of the other three employees is 80 points. What is the total income of the CEO?</span> <br>
    <br>
    <table>
    <tr>
        <td> <span style="font-size: medium; ">Total Income for the CEO: </span> </td>
        <td><input type="float" name="ControlQ23" id="ControlQ23" value="" min="0" max="1000000"></td>
    </tr>
    </table>
    <br>
    <br>
    Now suppose the supervisor decides to set a minimum transfer of 5 points for his/her employee.
    <br>
    <br>
    <span style="font-size: medium; ">f) What is the minimum number of points her/his employee must transfer?</span>
    <br>
    <table>
        <tr>
            <td><input type="radio" name="ControlQ3" value="0"></td>
            <td>0 Points</td>
        </tr>
        <tr>
            <td><input type="radio" name="ControlQ3" value="0"></td>
            <td>5 Points</td>
        </tr>
    </table>
    <br><br>

    <!-- Control Question 2 -->
    <span style="font-size: medium; "><b>Control Question 2</b></span>
        <br>    <br>
    <p>Assume that the CEO decides to force the supervisors to set the minimum transfer of 5 points for their employee.</p>

    <span style="font-size: medium; ">g) What choice do the supervisors have in setting the minimum transfer in this case?</span>
    <br>
    <table>
        <tr>
            <td><label>
                <input type="radio" name="ControlQ31" value="0">
            </label></td>
            <td>No choice</td>
        </tr>
        <tr>
            <td><input type="radio" name="ControlQ31" value="0"></td>
            <td>The choice whether or not to set a minimum transfer of 5 points for her/his employee or whether or not s/he lets the employee decide completely freely about her/his transfer.</td>
        </tr>
    </table>
    <br>
    <br>
    <span style="font-size: medium; ">h) The employee assigned to this supervisor decides to transfer 60 points. What income results from this transfer (ignoring the other supervisor-employee pairs)?</span>
        <br>
    <table>
        <tr>
            <td>Points for the Employee:</td>
            <td><input type="float" name="ControlQ32" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="float" name="ControlQ33" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="float" name="ControlQ34" value="" min="0" max="1000000"></td>
        </tr>
    </table>
    <br>
</form>
</div>
</div>
    <br>
    <div align="right"><input type="submit" id="confirm" class="btn btn-primary" onclick="return check_answers();" value="Confirm"/></div>

    <div class="alert alert-danger" id="error_message" style="visibility: hidden"></div>
    <input type="hidden" name="counter_wrong" id="counter_wrong" value="0">

    <script>
        var counter_wrong = 0;

        function check_answers() {
            let submit = false;

            // get all answers
            const question1 = document.getElementsByName('ControlQ1');
            const question11 = document.getElementsByName('ControlQ11');
            const question12 = document.getElementsByName('ControlQ12');
            const question13 = document.getElementsByName('ControlQ13');
            const question14 = document.getElementsByName('ControlQ14');
            const question2 = document.getElementsByName('ControlQ2');
            const question21 = document.getElementsByName('ControlQ21');
            const question22 = document.getElementsByName('ControlQ22');
            const question23 = document.getElementsByName('ControlQ23');
            const question3 = document.getElementsByName('ControlQ3');
            const question31 = document.getElementsByName('ControlQ31');
            const question32 = document.getElementsByName('ControlQ32');
            const question33 = document.getElementsByName('ControlQ33');
            const question34 = document.getElementsByName('ControlQ34');

            const incorrectAnswers = [];

            if (
                question1[1].checked == true &&  // (a)
                question11[0].value == "115" && (question12[0].value == "2.5" || question12[0].value == "2,5") && question13[0].value == "10" &&  // (b)
                (question14[0].value == "32.5" || question14[0].value == "32,5") &&  // (c)
                question2[0].value == "100" && question21[0].value == "10" && question22[0].value == "40" &&  // (d)
                question23[0].value == "50" &&  // (e)
                question3[1].checked == true && // (f)
                question31[0].checked == true &&  // (g)
                question32[0].value == "60" && question33[0].value == "30" && question34[0].value == "120"  // (h)
            ) {
                submit = true;
                document.getElementById("counter_wrong").setAttribute('value', counter_wrong);
            } else {
                counter_wrong = counter_wrong + 1;

                // Check individual answers and push the corresponding question letter to incorrectAnswers array
                if (question1[1].checked != true) incorrectAnswers.push('a');
                if (question11[0].value != "115" || (question12[0].value != "2.5" && question12[0].value != "2,5") || question13[0].value != "10") incorrectAnswers.push('b');
                if (question14[0].value != "32.5" && question14[0].value != "32,5") incorrectAnswers.push('c');
                if (question2[0].value != "100" || question21[0].value != "10" || question22[0].value != "40") incorrectAnswers.push('d');
                if (question23[0].value != "50") incorrectAnswers.push('e');
                if (question3[1].checked != true) incorrectAnswers.push('f');
                if (question31[0].checked != true) incorrectAnswers.push('g');
                if (question32[0].value != "60" || question33[0].value != "30" || question34[0].value != "120") incorrectAnswers.push('h');

                if (counter_wrong < 5) {
                    submit = false;
                    document.getElementById('error_message').innerHTML =
                        "You did not answer everything correctly. You answered question(s) " +
                        incorrectAnswers.map(letter => letter + ')').join(', ') +
                        " wrong. Please try again." + "<br>" +
                        " You have " + (5 - counter_wrong) + " trie" + (counter_wrong === 4 ? '' : 's') + " left.";
                    document.getElementById('error_message').style = "visibility: visible";
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
                } else {
                    // Redirect to the exclusion page if counter_wrong exceeds 4
                    submit = true;
                    document.getElementById("counter_wrong").setAttribute('value', counter_wrong);
                }
            }
            return submit;
        }
    </script>

<script>
    // Existing JavaScript functions...

    // Add this script at the end
    document.getElementById("toggleButton").addEventListener("click", function() {
        var text = document.getElementById("textToToggle");
        if (text.style.display === "none") {
            text.style.display = "block";
        } else {
            text.style.display = "none";
        }
    });
</script>
{% endblock %}