{% 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>
        Quiz1
    </h3>
    <p>
       Suppose out of the 6 students, Student 1, 3, and 4 applied to School A, while Student 2, 5, and 6 applied to School B.
        After their applications, exam scores were assigned based on their student types.
    </p>

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

The following is the summary of applications and their exam score.
                    <img  src="{{ static 'histogram/Quiz1.png' }}" width="90%"/>
        </div>
     <p>
Keeping in mind that each school can admit a maximum of two applicants with the highest scores from their own applicants.
    </p>
        <div id="quiz1">
        <h2>Who would be accepted in School A? (select all apply)</h2>
        <input type="checkbox" id="q1_option1" value="Student1" name="student1JP"> 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="student3JP"> 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="student4JP"> 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">
    <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.</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>Who would be accepted in School B? (select all apply)</h2>
        <input type="checkbox" id="q2_option1" value="Student2" name="student2JP"> 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="student5JP"> 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="student6JP"> Student 6
        <span id="q2_option3Message" style="display: none;">This was the right 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">
        <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">
    <br><br>
         <p style = "color: red">You made a mistake. Please check the correct answers above.</p>
        <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="student1JP" id="student1Answer" value="">
        <input type="hidden" name="student3JP" id="student3Answer" value="">
        <input type="hidden" name="student4JP" id="student4Answer" value="">
        <input type="hidden" name="student2JP" id="student2Answer" value="">
        <input type="hidden" name="student5JP" id="student5Answer" value="">
        <input type="hidden" name="student6JP" id="student6Answer" 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;


        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 === "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";
                    }
                }

                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" : "";


        if (x === 1) {
            if (student1Selected && student3Selected && !student4Selected) {
                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;

        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 B 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 === "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 B 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 B applicants.</p>`;
                    }
                }

                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" : "";

        if  (x === 4) {
            if (student2Selected && student6Selected && !student5Selected) {
                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 (student2Selected && student6Selected && !student5Selected) {
                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 = "Next"
                part8Message.textContent = "Please read the handout of task1";
            }
        }
    }








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