<?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 1</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 1">
            <!-- <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="1">
                <p class="circle">1</p>
                <img src="quantitative/1.png" alt="Q1">
                <div class="choices options" id="qn1-answer">
                    <label><b>A</b><input type="radio" name="answer1" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer1" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer1" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer1" 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="2">
                <p class="circle">2</p>
                <img src="quantitative/2.png" alt="Q2">
                <div class="choices options" id="qn2-answer">
                    <label><b>A</b><input type="radio" name="answer2" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer2" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer2" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer2" 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="3">
                <p class="circle">3</p>
                <img src="quantitative/3.png" alt="Q3">
                <div class="choices options" id="qn3-answer">
                    <label><b>A</b><input type="radio" name="answer3" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer3" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer3" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer3" 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="4">
                <p class="circle">4</p>
                <img src="quantitative/4.png" alt="Q4">
                <div class="choices options" id="qn4-answer">
                    <label><b>A</b><input type="radio" name="answer4" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer4" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer4" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer4" 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="5">
                <p class="circle">5</p>
                <img src="quantitative/5.png" alt="Q5">
                <div class="choices options" id="qn5-answer">
                    <label><b>A</b><input type="radio" name="answer5" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer5" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer5" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer5" 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="6">
                <p class="circle">6</p>
                <img src="quantitative/6.png" alt="Q6">
                <div class="choices options" id="qn6-answer">
                    <label><b>A</b><input type="radio" name="answer6" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer6" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer6" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer6" 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="7">
                <p class="circle">7</p>
                <img src="quantitative/7.png" alt="Q7">
                <div class="choices options" id="qn7-answer">
                    <label><b>A</b><input type="radio" name="answer7" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer7" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer7" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer7" 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="8">
                <p class="circle">8</p>
                <img src="quantitative/8.png" alt="Q8">
                <div class="choices options" id="qn8-answer">
                    <label><b>A</b><input type="radio" name="answer8" value="Quantity A is greater" >Quantity A is greater</label><br><br>
                    <label><b>B</b><input type="radio" name="answer8" value="Quantity B is greater" >Quantity B is greater</label><br><br>
                    <label><b>C</b><input type="radio" name="answer8" value="The two quantities are equal" >The two quantities are equal</label><br><br>
                    <label><b>D</b><input type="radio" name="answer8" 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="9">
                <p class="circle">9</p>
                <img src="quantitative/9.png" alt="Q9">
                <div class="choices options" id="qn9-answer">
                    <label><b>A</b><input type="radio" name="answer9" value="108" >108</label><br><br>
                    <label><b>B</b><input type="radio" name="answer9" value="168" >168</label><br><br>
                    <label><b>C</b><input type="radio" name="answer9" value="210" >210</label><br><br>
                    <label><b>D</b><input type="radio" name="answer9" value="330" >330</label><br><br>
                    <label><b>E</b><input type="radio" name="answer9" value="462" >462</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="10">
                <p class="circle">10</p>
                <img src="quantitative/10.png" alt="Q10">
                <div class="choices options" >
                    <center><input type="number" id="qn10-answer" name="answer10"></center>
                </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 1</h4>
            <h4 class="center-heading subtitle">20 QUESTIONS</h4>
            <h4 class="center-heading subtitle">35 MINUTES</h4>
            <!--  -->
            <div class="question" number="11">
                <p class="circle">11</p>
                <img src="quantitative/11.png" alt="Q11">
                <div class="choices options" id="qn11-answer">
                    <label><b>A</b><input type="radio" name="answer11" value="4" >4</label><br><br>
                    <label><b>B</b><input type="radio" name="answer11" value="9" >9</label><br><br>
                    <label><b>C</b><input type="radio" name="answer11" value="10" >10</label><br><br>
                    <label><b>D</b><input type="radio" name="answer11" value="11" >11</label><br><br>
                    <label><b>E</b><input type="radio" name="answer11" value="12" >12</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="12">
                <p class="circle">12</p>
                <img src="quantitative/12.png" alt="Q12">
                <div class="choices options" id="qn12-answer">
                    <label><b>A</b><input type="checkbox" name="answer12" value="(-1, 1)" >(-1, 1)</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer12" value="(-1, 0)" >(-1, 0)</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer12" value="(1, 0)" >(1, 0)</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer12" value="(1, 1)" >(1, 1)</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer12" value="(1, 4)" >(1, 4)</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="13">
                <p class="circle">13</p>
                <img src="quantitative/13.png" alt="Q13">
                <div class="choices options" id="qn13-answer">
                    <label><b>A</b><input type="radio" name="answer13" value="2/3" >2/3</label><br><br>
                    <label><b>B</b><input type="radio" name="answer13" value="3/13" >3/13</label><br><br>
                    <label><b>C</b><input type="radio" name="answer13" value="4/13" >4/13</label><br><br>
                    <label><b>D</b><input type="radio" name="answer13" value="6/13" >6/13</label><br><br>
                    <label><b>E</b><input type="radio" name="answer13" value="7/13" >7/13</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="14">
                <p class="circle">14</p>
                <img src="quantitative/14.png" alt="Q14">
                <div class="choices options" id="qn14-answer">
                    <label><b>A</b><input type="radio" name="answer14" value="1/18" >1/18</label><br><br>
                    <label><b>B</b><input type="radio" name="answer14" value="53/250" >53/250</label><br><br>
                    <label><b>C</b><input type="radio" name="answer14" value="13/50" >13/50</label><br><br>
                    <label><b>D</b><input type="radio" name="answer14" value="1/13" >1/13</label><br><br>
                    <label><b>E</b><input type="radio" name="answer14" value="7/20" >7/20</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="15">
                <p class="circle">15</p>
                <img src="quantitative/15.png" alt="Q15">
                <div class="choices options" id="qn15-answer">
                    <label><b>A</b><input type="radio" name="answer15" value="3%" >3%</label><br><br>
                    <label><b>B</b><input type="radio" name="answer15" value="15%" >15%</label><br><br>
                    <label><b>C</b><input type="radio" name="answer15" value="18%" >18%</label><br><br>
                    <label><b>D</b><input type="radio" name="answer15" value="36%" >36%</label><br><br>
                    <label><b>E</b><input type="radio" name="answer15" value="87%" >87%</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="16">
                <p class="circle">16</p>
                <img src="quantitative/16.png" alt="Q16">
                <div class="choices options" id="qn16-answer">
                    <label><b>A</b><input type="radio" name="answer16" value="3%" >3%</label><br><br>
                    <label><b>B</b><input type="radio" name="answer16" value="15%" >15%</label><br><br>
                    <label><b>C</b><input type="radio" name="answer16" value="18%" >18%</label><br><br>
                    <label><b>D</b><input type="radio" name="answer16" value="36%" >36%</label><br><br>
                    <label><b>E</b><input type="radio" name="answer16" value="87%" >87%</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="17">
                <p class="circle">17</p>
                <img src="quantitative/17.png" alt="Q17">
                <div class="choices options" id="qn17-answer">
                    <label><b>A</b><input type="radio" name="answer17" value="110" >110</label><br><br>
                    <label><b>B</b><input type="radio" name="answer17" value="1,200" >1,200</label><br><br>
                    <label><b>C</b><input type="radio" name="answer17" value="2,600" >2,600</label><br><br>
                    <label><b>D</b><input type="radio" name="answer17" value="4,800" >4,800</label><br><br>
                    <label><b>E</b><input type="radio" name="answer17" value="9,200" >9,200</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="18">
                <p class="circle">18</p>
                <img src="quantitative/18.png" alt="Q18">
                <div class="choices options" id="qn18-answer">
                    <label><b>A</b><input type="checkbox" name="answer18" value="-2" >-2</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer18" value="-1" >-1</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer18" value="0" >0</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer18" value="1/2" >1/2</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer18" value="1" >1</label><br><br>
                </div>
            </div>
            <!--  -->
            <div class="question" number="19">
                <p class="circle">19</p>
                <img src="quantitative/19.png" alt="Q19">
                <div class="choices options" id="qn19-answer">
                    <label><b>A</b><input type="checkbox" name="answer19" value="-2" >-2</label><br><br>
                    <label><b>B</b><input type="checkbox" name="answer19" value="-2/9" >-2/9</label><br><br>
                    <label><b>C</b><input type="checkbox" name="answer19" value="2/9" >2/9</label><br><br>
                    <label><b>D</b><input type="checkbox" name="answer19" value="2" >2</label><br><br>
                    <label><b>E</b><input type="checkbox" name="answer19" value="9/2" >9/2</label><br><br>
                </div>
            </div>
            
            <!--  -->
            <!--  -->
            <div class="question" number="20">
                <p class="circle">20</p>
                <img src="quantitative/20.png" alt="Q20">
                <div class="choices options" id="qn20-answer">
                    <label><b>A</b><input type="radio" name="answer20" value="1.5" >1.5</label><br><br>
                    <label><b>B</b><input type="radio" name="answer20" value="3">3</label><br><br>
                    <label><b>C</b><input type="radio" name="answer20" value="π" >π</label><br><br>
                    <label><b>D</b><input type="radio" name="answer20" value="6">6</label><br><br>
                    <label><b>E</b><input type="radio" name="answer20" value="6π" >6π</label><br><br>
                </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 = 1; i <= 20; i++) {
                    let questionId;
                    let answer;
                    if(i===10){
                        questionId = `#qn${i}-answer`;
                        answer1 = $(questionId).val();
                        answers[`qn${i}`] = answer1
                    }else if (i === 12 || i === 18 || i === 19) { // 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>
