{% extends "global/Page.html" %}

{% block title %}Introduction{% endblock %}
{% block content %}
   <style>
       span[id$="Message"] p {
            margin: 1px 0; /* Adjust this value as needed */
        }

        #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>
        Quiz1
    </h3>
    <p>
       Suppose 6 students made a following application and got their exam score based on their student type.
    </p>

       <div id="picture" style="display: inline-block;width: 60%;margin-right: -10%">

                    <img  src="{{ static 'histogram/student_193.png' }}" width="90%"/>
        </div>


        <div id="quiz1">
            <h2><b>Phase 1 :</b> Who is accepted in School A?</h2>
         <p style="padding-left: 20px; color: red">
        In the phase 1, each school accepts the highest score student from their applicants (if there is any).
        </p>

        <input type="checkbox" id="q1_option1" value="Student1" name="student_1"> 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="student_3"> Student 3
        <span id="q1_option2Message" style="display: none;">This was the wrong answer.</span><br>

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

        <input type="checkbox" id="q1_option4" value="None1" name="none1"> None
        <span id="q1_option4Message" 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">
    <br><br>
        <p style="color: green">You are correct. </p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next2" onclick="next(2)">Next</button>
    </div>

    <div id="part3" style="display: none">
    <br><br>
        <p style = "color: red">You made a mistake. Please check the correct answers above and try it again.</p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next3" onclick="next(3)">Try next quiz</button>
    </div>


    <!-- Quiz 2 (After Part 4) -->
    <div id="quiz5" style="display: none">
        <h2><b>Phase 1 :</b> Who is accepted in School B?</h2>
             <p style="padding-left: 20px; color: red">
        In the phase 1, each school accepts the highest score student from their applicants (if there is any).
        </p>

        <input type="checkbox" id="q2_option1" value="Student2" name="student_2"> Student 2
        <span id="q2_option1Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q2_option2" value="Student5" name="student_5"> Student 5
        <span id="q2_option2Message" style="display: none;">This was the wrong answer.</span><br>

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

        <input type="checkbox" id="q2_option4" value="None2" name="none2"> None
        <span id="q2_option4Message" style="display: none;">This was the wrong answer.</span><br>

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

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

    <div id="part7" style="display: none">
    <br><br>
         <p style = "color: red">You made a mistake. Please check the correct answers above and try it again.</p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next7" onclick="next(7)">Next</button>
    </div>

   <div id="picture1" style="display: none; width: 60%;margin-right: -10%">
        <img  src="{{ static 'histogram/student_194.png' }}" width="90%"/>
    </div>

   <div id="picture2" style="display: none; width: 60%;margin-right: -10%">
        <img  src="{{ static 'histogram/student_195.png' }}" width="90%"/>
    </div>


    <div id="quiz8" style="display: none">

        <h2><b>Phase 2 :</b> The below is the list of students who are yet assigned. Who is accepted in School A?</h2>
             <p style="padding-left: 20px; color: red">
        In the phase 2, School A chooses students with highest score among all unassigned students until its seats are full.
             </p>

        <input type="checkbox" id="q3_option1" value="Student1A" name="student_1A"> Student 1
        <span id="q3_option1Message" style="display: none;">This was the right answer.</span><br>

        <input type="checkbox" id="q3_option2" value="Student4A" name="student_4A"> Student 4
        <span id="q3_option2Message" style="display: none;">This was the wrong answer.</span><br>

        <input type="checkbox" id="q3_option3" value="Student5A" name="student_5A"> Student 5
        <span id="q3_option3Message" style="display: none;">This was the wrong answer.</span><br>

        <input type="checkbox" id="q3_option4" value="Student6A" name="student_6A"> Student 6
        <span id="q3_option4Message" style="display: none;">This was the wrong answer.</span><br>

        <button class="otree-btn-next btn btn-primary" type="button" id="next8" onclick="checkAndProceed2(8)">Next</button>
    </div>


        <div id="part9" style="display: none">
    <br><br>
        <p style="color: green">You are correct. </p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next9" onclick="next(9)">Next</button>
    </div>

    <div id="part10" style="display: none">
    <br><br>
         <p style = "color: red">You made a mistake. Please check the correct answers above and try it again.</p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next10" onclick="next(10)">Next</button>
    </div>

    <div id="quiz11" style="display: none">
        <h2><b>Phase 2 :</b> The below is the list of students who are yet assigned. Who is accepted in School B?</h2>
             <p style="padding-left: 20px; color: red">
        In the phase 2, after School A get full, School B chooses students with highest score among all unassigned students until its seats are full.
             </p>

        <input type="checkbox" id="q4_option1" value="Student4B" name="student_4B"> Student 4
        <span id="q4_option1Message" style="display: none;">This was the wrong answer.</span><br>

        <input type="checkbox" id="q4_option2" value="Student5B" name="student_5B"> Student 5
        <span id="q4_option2Message" style="display: none;">This was the wrong answer.</span><br>

        <input type="checkbox" id="q4_option3" value="Student6B" name="student_6B"> Student 6
        <span id="q4_option3Message" style="display: none;">This was the wrong answer.</span><br>

        <button class="otree-btn-next btn btn-primary" type="button" id="next11" onclick="checkAndProceed3(11)">Next</button>
    </div>

       <div id="part12" style="display: none">
    <br><br>
         <p style = "color: red">You are correct. </p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next12" onclick="next(12)">Next</button>
    </div>

    <div id="part13" style="display: none">
     <br><br>
        <p style="color: green">You made a mistake. Please check the correct answers above and try it again.</p>
        <button class="otree-btn-next btn btn-primary" type="button" id="next13" onclick="next(13)">Next</button>
    </div>


    <div id="part14" style="display: none">
        <h2 id="part14-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="student_1" id="student1Answer" value="">
        <input type="hidden" name="student_3" id="student3Answer" value="">
        <input type="hidden" name="student_4" id="student4Answer" value="">
        <input type="hidden" name="student_2" id="student2Answer" value="">
        <input type="hidden" name="student_5" id="student5Answer" value="">
        <input type="hidden" name="student_6" id="student6Answer" value="">
        <input type="hidden" name="none1" id="none1Answer" value="">
        <input type="hidden" name="none2" id="none2Answer" value="">

        <input type="hidden" name="student_1A" id="Astudent1Answer" value="">
        <input type="hidden" name="student_4A" id="Astudent4Answer" value="">
        <input type="hidden" name="student_5A" id="Astudent5Answer" value="">
        <input type="hidden" name="student_6A" id="Astudent6Answer" value="">

        <input type="hidden" name="student_4B" id="Bstudent4Answer" value="">
        <input type="hidden" name="student_5B" id="Bstudent5Answer" value="">
        <input type="hidden" name="student_6B" id="Bstudent6Answer" 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 none1Selected = 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: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student3") {
                        student3Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student4") {
                        student4Selected = true;
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is a wrong answer. </span><br>
                                                This student gets rejected since school A accepts Student 1 and 3
                                                as they are the top 2 students among its applicants.</p>`;
                    } else if (checkbox.value === "None1") {
                        none1Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    }
                } else {
                    if (checkbox.value === "Student1") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student3") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student4") {
                        messageSpan.textContent = "You are correct: REJECTED";
                        messageSpan.style.color = "green";
                    } if (checkbox.value === "None1") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    }
                }

                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("none1Answer").value = none1Selected ? "None1" : "";

        if (x === 1) {
            if (!student1Selected && student3Selected && !student4Selected && !none1Selected) {
                document.getElementById("part2").style.display = "inline";
                document.getElementById("next1").style.display = "none";
            } else {
                document.getElementById("part3").style.display = "inline";
                document.getElementById("next1").style.display = "none";
            }
        }
    }

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

        let student2Selected = false;
        let student5Selected = false;
        let student6Selected = false;
        let none2Selected = 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 === "Student2") {
                        student2Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student5") {
                        student5Selected = true;
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is a wrong answer. </span><br>
                                                This student gets rejected since school A accepts Student 2 and 6
                                                as they are the top 2 students among its applicants.</p>`;
                    } else if (checkbox.value === "Student6") {
                        student6Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "None2") {
                        none2Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    }
                } else {
                    if  (checkbox.value === "Student2") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student5") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student6") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "None2") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    }
                }

                messageSpan.style.display = "inline";
                checkbox.disabled = true;
            }
        }

        document.getElementById("student2Answer").value = student2Selected ? "Student2" : "";
        document.getElementById("student5Answer").value = student5Selected ? "Student5" : "";
        document.getElementById("student6Answer").value = student6Selected ? "Student6" : "";
        document.getElementById("none2Answer").value = none2Selected ? "None2" : "";

        if  (x === 5) {
            if (student2Selected && !student6Selected && !student5Selected && !none2Selected) {
                document.getElementById("part6").style.display = "inline";
                document.getElementById("next5").style.display = "none";
            } else {
                document.getElementById("part7").style.display = "inline";
                document.getElementById("next5").style.display = "none";
            }
        }
    }


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

        let Astudent1Selected = false;
        let Astudent4Selected = false;
        let Astudent5Selected = false;
        let Astudent6Selected = 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 === "Student1A") {
                        Astudent1Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student4A") {
                        Astudent4Selected = true;
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is a wrong answer. </span><br>
                                                This student gets rejected since school A accepts Student 2 and 6
                                                as they are the top 2 students among its applicants.</p>`;
                    } else if (checkbox.value === "Student5A") {
                        Astudent5Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student6A") {
                        Astudent6Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    }
                } else {
                    if  (checkbox.value === "Student1A") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student4A") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student5A") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student6A") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    }
                }

                messageSpan.style.display = "inline";
                checkbox.disabled = true;
            }
        }

        document.getElementById("Astudent1Answer").value = Astudent1Selected ? "Student1A" : "";
        document.getElementById("Astudent4Answer").value = Astudent4Selected ? "Student4A" : "";
        document.getElementById("Astudent5Answer").value = Astudent5Selected ? "Student5A" : "";
        document.getElementById("Astudent6Answer").value = Astudent6Selected ? "Student6A" : "";

        if  (x === 8) {
            if (Astudent1Selected && !Astudent4Selected && !Astudent5Selected && !Astudent6Selected) {
                document.getElementById("part9").style.display = "inline";
                document.getElementById("next8").style.display = "none";
            } else {
                document.getElementById("part10").style.display = "inline";
                document.getElementById("next8").style.display = "none";
            }
        }

    }


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

        let Bstudent4Selected = false;
        let Bstudent5Selected = false;
        let Bstudent6Selected = 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 === "Student4B") {
                        Bstudent4Selected = true;
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is a wrong answer. </span><br>
                                                This student gets rejected since school A accepts Student 2 and 6
                                                as they are the top 2 students among its applicants.</p>`;
                    } else if (checkbox.value === "Student5B") {
                        Bstudent5Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student6B") {
                        Bstudent6Selected = true;
                        messageSpan.textContent = "You are correct: ACCEPTED.";
                        messageSpan.style.color = "green";
                    }
                } else {
                    if (checkbox.value === "Student4B") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    } else if (checkbox.value === "Student5B") {
                        messageSpan.innerHTML = `<p style="padding-left: 20px;"><span style="color: red">This is one of the correct answer </span><br>
                                This student is in top 2 students among school A applicants.</p>`;
                    } else if (checkbox.value === "Student6B") {
                        messageSpan.textContent = "You are correct: REJECTED.";
                        messageSpan.style.color = "green";
                    }
                }

                messageSpan.style.display = "inline";
                checkbox.disabled = true;
            }
        }

        document.getElementById("Bstudent4Answer").value = Bstudent4Selected ? "Student4B" : "";
        document.getElementById("Bstudent5Answer").value = Bstudent5Selected ? "Student5B" : "";
        document.getElementById("Bstudent6Answer").value = Bstudent6Selected ? "Student6B" : "";

        if (x === 11) {
            const button = document.getElementById("start-game-button");
            const part14Message = document.getElementById("part14-message");
            if (!Bstudent4Selected && !Bstudent5Selected && Bstudent6Selected) {
                document.getElementById("part12").style.display = "inline";
                document.getElementById("next11").style.display = "none";
                button.textContent = "Next";
                part14Message.textContent = "You will go to the second task of this game rule";
            } else {
                document.getElementById("part13").style.display = "inline";
                document.getElementById("next11").style.display = "none";
                button.textContent = "Retake the quiz"
                part14Message.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("quiz8").style.display = "inline";
            document.getElementById("picture1").style.display = "inline";
            document.getElementById("next6").style.display = "none";
            document.getElementById("picture").style.display = "none";
            document.getElementById("quiz1").style.display = "none";
            document.getElementById("part2").style.display = "none";
            document.getElementById("part3").style.display = "none";
            document.getElementById("quiz5").style.display = "none";
            document.getElementById("part6").style.display = "none";


        } else if (x === 7) {
            // Quiz 2 player, skip Part 6 and proceed to the end
            document.getElementById("quiz8").style.display = "inline";
            document.getElementById("picture1").style.display = "inline";
            document.getElementById("next7").style.display = "none";
            document.getElementById("picture").style.display = "none";
            document.getElementById("quiz1").style.display = "none";
            document.getElementById("part2").style.display = "none";
            document.getElementById("part3").style.display = "none";
            document.getElementById("quiz5").style.display = "none";
            document.getElementById("part7").style.display = "none";
        }else if (x === 9) {
            // Quiz 2 player, skip Part 6 and proceed to the end
            document.getElementById("quiz11").style.display = "inline";
            document.getElementById("picture2").style.display = "inline";
            document.getElementById("picture1").style.display = "none";
            document.getElementById("next9").style.display = "none";
        } else if (x === 10) {
            // Quiz 2 player, skip Part 6 and proceed to the end
            document.getElementById("quiz11").style.display = "inline";
            document.getElementById("picture2").style.display = "inline";
            document.getElementById("picture1").style.display = "none";
            document.getElementById("next10").style.display = "none";
        } else if (x === 12) {
            // Quiz 2 player, skip Part 6 and proceed to the end
            document.getElementById("part14").style.display = "inline";
            document.getElementById("next12").style.display = "none";
        }else {
            document.getElementById("next" + x).style.display = "none";
            document.getElementById("part" + (x + 1)).style.display = "inline";
        }
    }
</script>
{% endblock %}