<?php include_once 'code/page_code.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GRE Exam</title>
    <link rel="stylesheet" href="css/gre.css">
</head>
<body>
    <div class="control-panel">
        <div class="container exam-timer">
            <h1 class="center-heading" id="timer-display">35:00</h1><br>
            <center><button class="center-heading" id="startButton">Start Test</button></center>
        </div>
        
        <div class="container section-1 hidden">
            <h1 class="center-heading" id="paper-display">35:00</h1>
            <h1 class="center-heading">QUANTITATIVE REASONING</h1>
            <h4 class="center-heading subtitle">SECTION 2</h4>
            <h4 class="center-heading subtitle">20 QUESTIONS</h4>
            <h4 class="center-heading subtitle">35 MINUTES</h4>
            <input type="hidden" id="exam_module" value="Quantitative Reasoning - Part 2">
            <!-- <div class="instruction">
                <p>Select one answer choice for the blank. Fill the blank in such a way that it best completes the text.</p>
            </div> -->
            <div class="question" number="21">
                <p class="circle">21</p>
                <img src="quantitative/21.png" alt="Q21">
                <div class="choices options" id="qn21-answer">
                    <label><b>A</b><input type="radio" name="answer21" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer21" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer21" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer21" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="22">
                <p class="circle">22</p>
                <img src="quantitative/22.png" alt="Q22">
                <div class="choices options" id="qn22-answer">
                    <label><b>A</b><input type="radio" name="answer22" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer22" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer22" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer22" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="23">
                <p class="circle">23</p>
                <img src="quantitative/23.png" alt="Q23">
                <div class="choices options" id="qn23-answer">
                    <label><b>A</b><input type="radio" name="answer23" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer23" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer23" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer23" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="24">
                <p class="circle">24</p>
                <img src="quantitative/24.png" alt="Q24">
                <div class="choices options" id="qn24-answer">
                    <label><b>A</b><input type="radio" name="answer24" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer24" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer24" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer24" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="25">
                <p class="circle">25</p>
                <img src="quantitative/25.png" alt="Q25">
                <div class="choices options" id="qn25-answer">
                    <label><b>A</b><input type="radio" name="answer25" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer25" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer25" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer25" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="26">
                <p class="circle">26</p>
                <img src="quantitative/26.png" alt="Q26">
                <div class="choices options" id="qn26-answer">
                    <label><b>A</b><input type="radio" name="answer26" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer26" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer26" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer26" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="27">
                <p class="circle">27</p>
                <img src="quantitative/27.png" alt="Q27">
                <div class="choices options" id="qn27-answer">
                    <label><b>A</b><input type="radio" name="answer27" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer27" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer27" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer27" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="28">
                <p class="circle">28</p>
                <img src="quantitative/28.png" alt="Q28">
                <div class="choices options" id="qn28-answer">
                    <label><b>A</b><input type="radio" name="answer28" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer28" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer28" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer28" value="The relationship cannot be determined from the information given " >The relationship cannot be determined from the information given </label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="29">
                <p class="circle">29</p>
                <img src="quantitative/29.png" alt="Q29">
                <div class="choices options" id="qn29-answer">
                    <label><b>A</b><input type="radio" name="answer29" value="18" >18</label><br><br>
                    <label><b>B</b><input type="radio" name="answer29" value="24" >24</label><br><br>
                    <label><b>C</b><input type="radio" name="answer29" value="36" >36</label><br><br>
                    <label><b>D</b><input type="radio" name="answer29" value="48" >48</label><br><br>
                    <label><b>E</b><input type="radio" name="answer29" value="60" >60</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="30">
                <p class="circle">30</p>
                <img src="quantitative/30.png" alt="Q30">
                <div class="choices options" id="qn30-answer">
                    <label><b>A</b><input type="radio" name="answer30" value="X is odd" >X is odd</label><br><br>
                    <label><b>B</b><input type="radio" name="answer30" value="X is even" >X is even</label><br><br>
                    <label><b>C</b><input type="radio" name="answer30" value="X ≠ 0" >X ≠ 0</label><br><br>
                    <label><b>D</b><input type="radio" name="answer30" value="If X is even, n is even" >If X is even, n is even</label><br><br>
                    <label><b>E</b><input type="radio" name="answer30" value="If n is odd, X is even" >If n is odd, X is even</label><br><br>
                </div>
            </div>
            <!--  -->
            <button id="continueBtn-1">Continue</button>
            <button id="submitBtn1">Submit</button>
        </div>
        <div class="container section-2 hidden">
        <h1 class="center-heading" id="paper2-display">35:00</h1>
            <h1 class="center-heading">QUANTITATIVE REASONING</h1>
            <h4 class="center-heading subtitle">SECTION 2</h4>
            <h4 class="center-heading subtitle">20 QUESTIONS</h4>
            <h4 class="center-heading subtitle">35 MINUTES</h4>
            <!--  -->
            <div class="question" number="31">
                <p class="circle">31</p>
                <img src="quantitative/31.png" alt="Q31">
                <div class="choices options" >
                    <center><input type="number" id="qn31-answer" name="answer31"></center>
                </div>
            </div>
            <!--  -->
            <div class="question" number="32">
                <p class="circle">32</p>
                <img src="quantitative/32.png" alt="Q32">
                <div class="choices options" id="qn32-answer">
                    <label><b>A</b><input type="checkbox" name="answer32" value="7%" >7%</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer32" value="25%" >25%</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer32" value="29%" >29%</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer32" value="32%" >32%</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer32" value="35%" >35%</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="33">
                <p class="circle">33</p>
                <img src="quantitative/33.png" alt="Q33">
                <div class="choices options" id="qn33-answer">
                    <label><b>A</b><input type="checkbox" name="answer33" value="The median value of the popular vote for Clinton was less than the median value of the popular vote for Bush." >The median value of the popular vote for Clinton was less than the median value of the popular vote for Bush.</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer33" value="The range of the popular vote for Bush was greater than the range of the popular vote for Clinton" >The range of the popular vote for Bush was greater than the range of the popular vote for Clinton</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer33" value="The percentage of the popular vote received by Bush in each state was less than the percentage received by Clinton in each state." >The percentage of the popular vote received by Bush in each state was less than the percentage received by Clinton in each state.</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer33" value="The popular vote received by Perot in each state was at least half of the popular vote received by Bush in each state." >The popular vote received by Perot in each state was at least half of the popular vote received by Bush in each state.</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer33" value="The least number of popular vote were recorded in South Dakota." >The least number of popular vote were recorded in South Dakota.</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="34">
                <p class="circle">34</p>
                <img src="quantitative/34.png" alt="Q34">
                <div class="choices options" id="qn34-answer">
                    <label><b>A</b><input type="radio" name="answer34" value="South Dakota" >South Dakota</label><br><br>
                    <label><b>B</b><input type="radio" name="answer34" value="North Dakota" >North Dakota</label><br><br>
                    <label><b>C</b><input type="radio" name="answer34" value="Nebraska" >Nebraska</label><br><br>
                    <label><b>D</b><input type="radio" name="answer34" value="Kansas" >Kansas</label><br><br>
                    <label><b>E</b><input type="radio" name="answer34" value="Iowa" >Iowa</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="35">
                <p class="circle">35</p>
                <img src="quantitative/35.png" alt="Q35">
                <div class="choices options" id="qn35-answer">
                    <label><b>A</b><input type="radio" name="answer35" value="2.5 million" >2.5 million</label><br><br>
                    <label><b>B</b><input type="radio" name="answer35" value="2.0 million" >2.0 million</label><br><br>
                    <label><b>C</b><input type="radio" name="answer35" value="1.5 million" >1.5 million</label><br><br>
                    <label><b>D</b><input type="radio" name="answer35" value="1.0 million" >1.0 million</label><br><br>
                    <label><b>E</b><input type="radio" name="answer35" value="0.5 million" >0.5 million</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="36">
                <p class="circle">36</p>
                <img src="quantitative/36.png" alt="Q36">
                <div class="choices options" >
                    <center><input type="number" id="qn36-answer" name="answer36"></center>
                </div>
            </div>
            <!--  -->
            <div class="question" number="37">
                <p class="circle">37</p>
                <img src="quantitative/37.png" alt="Q37">
                <div class="choices options" id="qn37-answer">
                    <label><b>A</b><input type="radio" name="answer37" value="55&deg;" >55&deg;</label><br><br>
                    <label><b>B</b><input type="radio" name="answer37" value="70&deg;" >70&deg;</label><br><br>
                    <label><b>C</b><input type="radio" name="answer37" value="75&deg;" >75&deg;</label><br><br>
                    <label><b>D</b><input type="radio" name="answer37" value="110&deg;" >110&deg;</label><br><br>
                    <label><b>E</b><input type="radio" name="answer37" value="125&deg;" >125&deg;</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="38">
                <p class="circle">38</p>
                <img src="quantitative/38.png" alt="Q38">
                <div class="choices options" id="qn38-answer">
                    <label><b>A</b><input type="radio" name="answer38" value="X <sup>2</sup> + 3x + 3  = 0" >X <sup>2</sup> + 3x + 3  = 0</label><br><br>
                    <label><b>B</b><input type="radio" name="answer38" value="X <sup>2</sup> + 8x + 15  = 0" >X <sup>2</sup> + 8x + 15  = 0</label><br><br>
                    <label><b>C</b><input type="radio" name="answer38" value="X <sup>2</sup> + 7x + 10  = 0" >X <sup>2</sup> + 7x + 10  = 0</label><br><br>
                    <label><b>D</b><input type="radio" name="answer38" value="X <sup>2</sup> + 10x + 16  = 0" >X <sup>2</sup> + 10x + 16  = 0</label><br><br>
                    <label><b>E</b><input type="radio" name="answer38" value="X <sup>2</sup> + 7x + 12  = 0" >X <sup>2</sup> + 7x + 12  = 0</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="39">
                <p class="circle">39</p>
                <img src="quantitative/39.png" alt="Q39">
                <div class="choices options" id="qn39-answer">
                    <label><b>A</b><input type="checkbox" name="answer39" value="(4, 7)" >(4, 7)</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer39" value="(4,-7)" >(4,-7)</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer39" value="(3, 6)" >(3, 6)</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer39" value="(5,6)" >(5,6)</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer39" value="(3,-6)" >(3,-6)</label><br><br>
                </div>
            </div>
            
            <!--  -->
            <!--  -->
            <div class="question" number="40">
                <p class="circle">40</p>
                <img src="quantitative/40.png" alt="Q40">
                <div class="choices options" >
                    <center><input type="number" id="qn40-answer" name="answer40"></center>
                </div>
            </div>
            <!--  -->
            <button id="previousBtn-1">Previous</button>
            <button id="continueBtn-2">Continue</button>
            <button id="submitBtn2">Submit</button>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
        var student_id = '<?php echo $student_id ?>';
        var key = '<?php echo $_SESSION['key'] ?>';
    </script>
    <!-- <script src="js/main.js"></script> -->
    <script>
        $(document).ready(function(){
            var exam_module = $('#exam_module').val();
            
            $('#continueBtn-1').click(function(){
                $('.section-1').addClass('hidden');
                $('#continueBtn-2').addClass('hidden');
                $('.section-2').removeClass('hidden');
            });
            $('#previousBtn-1').click(function(){
                $('.section-1').removeClass('hidden');
                $('.section-2').addClass('hidden');
            });

            var countdown = 35 * 60; // 30 minutes in seconds
            var display1 = $('#timer-display');
            var display2 = $('#paper-display');
            var display3 = $('#paper2-display');
            var timerInterval; // Declare the timerInterval variable
            
            function startTimer(duration, display1, display2, display3) {
            var timer = duration, minutes, seconds;
            timerInterval = setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);
            
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
            
                display1.text(minutes + ":" + seconds);
                display2.text(minutes + ":" + seconds);
                display3.text(minutes + ":" + seconds);
            
                if (--timer === 0) {
                clearInterval(timerInterval); // Clear the interval when timer reaches zero
                $('.exam-timer').removeClass('hidden');
                    $('.section-1').addClass('hidden');
                    $('.section-2').addClass('hidden');
                    $('#startButton').addClass('hidden')
                    $('#timer-display').html('<b><h3 style="color:darkred">Time Up!</h3></b><b><h4>Your Responses has been submitted</h4></b>')
                    var verbal_reasoning_section_1 = {
                        save_script: '',
                        student_id: student_id,
                        exam_module: exam_module,
                        key: key,
                        data:collectAnswers()
                    }
                    $.post('code/script_code.php',verbal_reasoning_section_1,function(response){
                        console.log(response)
                    })  
                console.log(collectAnswers());
                return 0;
                }
            }, 1000);
            }
            
            $('#startButton').click(function () {
            $('.exam-timer').addClass('hidden');
            $('.section-1').removeClass('hidden');
            startTimer(countdown, display1, display2, display3); // Start the timer
            });
            

            $('#submitBtn1').click(function() {
                $('.exam-timer').removeClass('hidden');
                $('.section-1').addClass('hidden');
                $('.section-2').addClass('hidden');
                $('#startButton').addClass('hidden')
                $('#timer-display').html('<b><h3 style="color:darkred">Submitted Successfully!</h3></b><b><h4>Your Responses has been submitted</h4></b><p><b><a href="index.php">Back to modules</a></p></b>')
                console.log(collectAnswers())
                clearInterval(timerInterval); 
                var verbal_reasoning_section_1 = {
                    save_script: '',
                    student_id: student_id,
                    exam_module: exam_module,
                    key: key,
                    data:collectAnswers()
                }
                console.log(verbal_reasoning_section_1)
                $.post('code/script_code.php',verbal_reasoning_section_1,function(response){
                    console.log(response)
                })
                return 0;
                
            });

            $('#submitBtn2').click(function() {
                $('.exam-timer').removeClass('hidden');
                $('.section-1').addClass('hidden');
                $('.section-2').addClass('hidden');
                $('#startButton').addClass('hidden')
                $('#timer-display').html('<b><h3 style="color:darkred">Submitted Successfully!</h3></b><b><h4>Your Responses has been submitted</h4></b><p><b><a href="index.php">Back to modules</a></p></b>')
                console.log(collectAnswers())
                clearInterval(timerInterval); 
                var verbal_reasoning_section_1 = {
                    save_script: '',
                    student_id: student_id,
                    exam_module: exam_module,
                    key: key,
                    data:collectAnswers()
                }
                $.post('code/script_code.php',verbal_reasoning_section_1,function(response){
                    console.log(response)
                })
                return 0;
                
            });

            // Get Answers
            function collectAnswers() {
                let answers = {};
                
                // Loop through questions 3 to 17
                for (let i = 21; i <= 40; i++) {
                    let questionId;
                    let answer;
                    if(i===31 || i===36 || i===40){
                        questionId = `#qn${i}-answer`;
                        answer = $(questionId).val();
                        answers[`qn${i}`] = answer;
                    }else if (i === 32 || i === 33 || i === 39) { // Handle radio button questions
                        questionId = `#qn${i}-answer`;
                        answer = '';
                        var checkedInputs = $(questionId + ' input[type=checkbox]:checked');

                        checkedInputs.each(function (index) {
                            answer += $(this).val();
                            if (index < checkedInputs.length - 1) {
                                answer += ','; // Add a comma if it's not the last checked input
                            }
                        });

                        answers[`qn${i}`] = answer || ''; // Use an empty string if no answer is selected

                    }else{
                        questionId = `#qn${i}-answer`;
                        answer = $(questionId + ' input[type=radio]:checked').val();
                        answers[`qn${i}`] = answer || ''; // Use an empty string if no answer is selected
                    }
                    
                }


                return answers;
            }
            // console.log(collectAnswers())


        });
    </script>
    <!-- <script src="js/gre.js"></script> -->
</body>
</html>
