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

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

{% block content %}
<style>
    /* draws line between table rows */
    th, td{
        border-bottom: 1px solid #ddd;
    }
    .employee-announcement {
            text-align: center;
            font-size: 24px; /* Adjust the font size as needed */
    }
    .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;
    }
    .instruction-card {
        background-color: #f8f9fa; /* light grey background */
        border: 1px solid #dee2e6; /* grey border */
        border-radius: 0.25rem; /* rounded corners */
        padding: 1.25rem; /* spacing inside the card */
        margin-bottom: 1rem; /* space below the card */
    }
    .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 */
    }
    ul {
        list-style-position: inside;
        padding-left: 0;
    }
    li {
        text-indent: -1em;
        padding-left: 1em;
    }
</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 supervisor 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="number" name="ControlQ11" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="number" name="ControlQ12" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="number" name="ControlQ13" value="" min="0" max="1000000"></td>
        </tr>
    </table>
    <br>
    <br>
    <span style="font-size: medium; ">c) The employee assigned to this supervisor decides to transfer 20 points. What income results from this transfer?</span>
        <br>
    <table>
        <tr>
            <td>Points for the Employee:</td>
            <td><input type="number" name="ControlQ2" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="number" name="ControlQ21" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="number" name="ControlQ22" 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; ">d) What is the minimum number of points her/his employee must transfer?</span>
    <br>
    <table>
        <tr>
            <td><input type="radio" name="ControlQ31" value="0"></td>
            <td>0 Points</td>
        </tr>
        <tr>
            <td><input type="radio" name="ControlQ31" 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 supervisor to set the minimum transfer of 5 points for their employee.</p>

    <span style="font-size: medium; ">e) What choice does the supervisor have in setting the minimum transfer in this case?</span>
    <br>
    <table>
        <tr>
            <td><label>
                <input type="radio" name="ControlQ3" value="0">
            </label></td>
            <td>No choice</td>
        </tr>
        <tr>
            <td><input type="radio" name="ControlQ3" 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; ">f) The employee assigned to this supervisor decides to transfer 60 points. What income results from this transfer?</span>
        <br>
    <table>
        <tr>
            <td>Points for the Employee:</td>
            <td><input type="number" name="ControlQ32" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the CEO:</td>
            <td><input type="number" name="ControlQ33" value="" min="0" max="1000000"></td>
        </tr>
        <tr>
            <td>Points for the Supervisor:</td>
            <td><input type="number" 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');  // (a)
        const question11 = document.getElementsByName('ControlQ11');  // (b)
        const question12 = document.getElementsByName('ControlQ12');  // (b)
        const question13 = document.getElementsByName('ControlQ13');  // (b)
        const question2 = document.getElementsByName('ControlQ2');  // (c)
        const question21 = document.getElementsByName('ControlQ21');  // (c)
        const question22 = document.getElementsByName('ControlQ22');  // (c)
        const question31 = document.getElementsByName('ControlQ31');  // (d)
        const question3 = document.getElementsByName('ControlQ3');  // (e)
        const question32 = document.getElementsByName('ControlQ32');  // (f)
        const question33 = document.getElementsByName('ControlQ33');  // (f)
        const question34 = document.getElementsByName('ControlQ34');  // (f)

        const incorrectAnswers = [];

        if (
            question1[1].checked == true &&  // (a)
            question11[0].value == 115 && question12[0].value == 10 && question13[0].value == 10 &&  // (b)
            question2[0].value == 100 && question21[0].value == 40 && question22[0].value == 40 &&   // (c)
            question31[1].checked == true &&  // (d)
            question3[0].checked == true &&   // (e)
            question32[0].value == 60 && question33[0].value == 120 && question34[0].value == 120  // (f)
        ) {
            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 != 10 || question13[0].value != 10) incorrectAnswers.push('b');
                if (question2[0].value != 100 || question21[0].value != 40 || question22[0].value != 40) incorrectAnswers.push('c');
                if (question31[0].checked != false) incorrectAnswers.push('d');
                if (question3[1].checked != false) incorrectAnswers.push('e');
                if (question32[0].value != 60 || question33[0].value != 120 || question34[0].value != 120) incorrectAnswers.push('f');

                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 %}