{% extends "global/Page.html" %}
{% block title %}Introduction{% endblock %}
{% block content %}
    <style>
        #parts-container {
            border: 1px solid #000;
            padding: 10px;
            max-width: 90%;
            margin: 2em;
        }

        /* Add any individual styles for part2, part3, part4, quiz2, etc., if needed */

        #start-game-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>

    <h3>
        Example
    </h3>

    <div id="quiz1">
        <h2>Who is/are accepted in School A?</h2>
        <input type="checkbox" id="q1_option1" value="Student1" name="student1"> Student 1
        <span id="q1_option1Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q1_option2" value="Student3" name="student3"> Student 3
        <span id="q1_option2Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q1_option3" value="Student4" name="student4"> Student 4
        <span id="q1_option3Message" style="display: none;">This was the wrong answer.</span><br>

        <button class="otree-btn-next btn btn-primary" type="button" id="next1" onclick="checkAndProceed(1)">Next</button>
    </div>

    <div id="part2" style="display: none">
        <h2>You are correct</h2>
        <button class="otree-btn-next btn btn-primary" type="button" id="next2" onclick="next(2)">Next</button>
    </div>

    <div id="part3" style="display: none">
        <h2>You are wrong</h2>
        <button class="otree-btn-next btn btn-primary" type="button" id="next3" onclick="next(3)">Next</button>
    </div>


    <!-- Quiz 2 (After Part 4) -->
    <div id="quiz5" style="display: none">
        <h2>Who is/are accepted in School B?</h2>
        <input type="checkbox" id="q2_option1" value="Student5" name="student5"> Student 5
        <span id="q2_option1Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q2_option2" value="Student6" name="student6"> Student 6
        <span id="q2_option2Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q2_option3" value="Student7" name="student7"> Student 7
        <span id="q2_option3Message" style="display: none;">This was the wrong answer.</span><br>

        <button class="otree-btn-next btn btn-primary" type="button" id="next5" onclick="checkAndProceed(5)">Next</button>
    </div>

    <div id="part6" style="display: none">
        <h2>You are correct</h2>
        <button class="otree-btn-next btn btn-primary" type="button" id="next6" onclick="next(6)">Next</button>
    </div>

    <div id="part7" style="display: none">
        <h2>You are wrong</h2>
        <button class="otree-btn-next btn btn-primary" type="button" id="next7" onclick="next(7)">Next</button>
    </div>

    <div id="part8" style="display: none">
        <h2 id="part8-message">On the next page, you will retake the quiz</h2>
        <div style="text-align: right">
            <button id="start-game-button" class="btn btn-primary">Press here we will ask a simple question about the game rule</button>
        </div>
    </div>

    <form id="quizForm" method="post">
        <input type="hidden" name="student1" id="student1Answer" value="">
        <input type="hidden" name="student3" id="student3Answer" value="">
        <input type="hidden" name="student4" id="student4Answer" value="">
        <input type="hidden" name="student5" id="student5Answer" value="">
        <input type="hidden" name="student6" id="student6Answer" value="">
        <input type="hidden" name="student7" id="student7Answer" value="">
    </form>

<script>
    function checkAndProceed(x) {
        const options = document.getElementById("quiz" + x).getElementsByTagName("input");
        let correct = false;

        let student1Selected = false;
        let student3Selected = false;
        let student4Selected = false;
        let student5Selected = false;
        let student6Selected = false;
        let student7Selected = false;

        for (let i = 0; i < options.length; i++) {
            if (options[i].type === "checkbox") {
                const checkbox = options[i];
                const messageSpan = document.getElementById(checkbox.id + "Message");

                if (checkbox.checked) {
                    if (checkbox.value === "Student1") {
                        student1Selected = true;
                        messageSpan.textContent = "You are correct.";
                    } else if (checkbox.value === "Student3") {
                        student3Selected = true;
                        messageSpan.textContent = "You are correct.";
                    } else if (checkbox.value === "Student4") {
                        student4Selected = true;
                        messageSpan.textContent = "You made a mistake.";
                    } else if (checkbox.value === "Student5") {
                        student5Selected = true;
                        messageSpan.textContent = "You are correct.";
                    } else if (checkbox.value === "Student6") {
                        student6Selected = true;
                        messageSpan.textContent = "You are correct.";
                    } else if (checkbox.value === "Student7") {
                        student7Selected = true;
                        messageSpan.textContent = "You made a mistake.";
                    }
                } else {
                    if (checkbox.value === "Student1") {
                        messageSpan.textContent = "This was the right answer.";
                    } else if (checkbox.value === "Student3") {
                        messageSpan.textContent = "This was the right answer.";
                    } else if (checkbox.value === "Student4") {
                        messageSpan.textContent = "This was the wrong answer.";
                    } else if (checkbox.value === "Student5") {
                        messageSpan.textContent = "This was the right answer.";
                    } else if (checkbox.value === "Student6") {
                        messageSpan.textContent = "This was the right answer.";
                    } else if (checkbox.value === "Student7") {
                        messageSpan.textContent = "This was the wrong answer.";
                    }
                }
                messageSpan.style.display = "inline";
                checkbox.disabled = true;
            }
        }

        document.getElementById("student1Answer").value = student1Selected ? "Student1" : "";
        document.getElementById("student3Answer").value = student3Selected ? "Student3" : "";
        document.getElementById("student4Answer").value = student4Selected ? "Student4" : "";
        document.getElementById("student5Answer").value = student5Selected ? "Student5" : "";
        document.getElementById("student6Answer").value = student6Selected ? "Student6" : "";
        document.getElementById("student7Answer").value = student7Selected ? "Student7" : "";

        if (x === 1) {
            if (student1Selected && student3Selected && !student4Selected) {
                document.getElementById("quiz5").style.display = "inline";
                document.getElementById("next1").style.display = "none";
            } else {
                document.getElementById("part3").style.display = "inline";
                document.getElementById("next1").style.display = "none";
            }
        } else if (x === 4) {
            if (student5Selected && student6Selected && !student7Selected) {
                document.getElementById("part5").style.display = "inline";
                document.getElementById("next4").style.display = "none";
            } else {
                document.getElementById("part6").style.display = "inline";
                document.getElementById("next4").style.display = "none";
            }
        } else if (x === 5) {
            const button = document.getElementById("start-game-button");
            const part8Message = document.getElementById("part8-message");
            if (student5Selected && student6Selected && !student7Selected) {
                document.getElementById("part6").style.display = "inline";
                document.getElementById("next5").style.display = "none";
                button.textContent = "Next";
                part8Message.textContent = "You will go to the second task of this game rule";
            } else {
                document.getElementById("part7").style.display = "inline";
                document.getElementById("next5").style.display = "none";
                button.textContent = "Retake the quiz"
                part8Message.textContent = "You will retake the quiz again";
            }
        }
    }

    function next(x) {
        if (x === 2) {
            // Part 2 player, skip Part 3 and go to Quiz 2
            document.getElementById("quiz5").style.display = "inline";
            document.getElementById("next2").style.display = "none";
        } else if (x === 3) {
            // Part 3 player, skip Part 4 and go to Quiz 2
            document.getElementById("quiz5").style.display = "inline";
            document.getElementById("next3").style.display = "none";
        } else if (x === 6) {
            // Quiz 2 player, skip Part 6 and proceed to the end
            document.getElementById("part8").style.display = "inline";
            document.getElementById("next6").style.display = "none";
        } else {
            document.getElementById("next" + x).style.display = "none";
            document.getElementById("part" + (x + 1)).style.display = "inline";
        }
    }
</script>

{% endblock %}