<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zest Consult SAT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
    <link id="pagestyle" href="assets/css/soft-design-system-pro.min9f1e.css?v=1.1.0" rel="stylesheet" />
    <link rel="Stylesheet" href="css/styles.css" />
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .custom-popover-container {
            max-width: 800px; /* Set the desired width */
        }
        .mock-container{
        }
        .question-information, .main-question{
            text-align:left;
        }
        .question-number-box{
            width:30px;
            padding:5px;
            background-color:#1E1E1E;
            color:#FFF;
            margin-bottom:2px;
        }
        .question-header{
            border-bottom:2px dashed #1E1E1E;
            
        }
        .question-number{
            margin-left:5px;
            color:#FFF;
            font-weight:bolder;
            font-size:15px;
            
        }
        .question-information-container{
            padding-left:30px;
            padding-right:30px;
        }
        .main-question{
            padding-left:30px;
            padding-right:30px;
        }
        .question-body{
            margin-top:10px;
        }
        .direct-question, .question-information{
            color:#1E1E1E;
            font-family:TimesNewRoman;
            font-size:17px;
        }
        .option{
            border:1px solid #505050;
            border-radius: 10px 10px 10px 10px;
            padding: 10px;
            margin-bottom:15px;
            cursor:pointer;
        }
        .option-text{
            margin-left:20px;
            margin-right:10px;
            color:#505050;
            font-family:TimesNewRoman;
            font-size: 18px;
        }

        .option-alpha{
            margin-left:20px;
            margin-right:10px;
            border: 2px solid #505050;
            border-radius: 50% 50%;
            padding: 2px;
            padding-left: 8px;
            padding-right: 8px;
            font-weight:bolder;
            color:#505050;
        }

        .option-selected{
            border:3px solid  #E59700;
        }

        .option-alpha-selected{
            background-color:#324DC7;
            color:#FFF;
        }
        .mock-container{
            height:450px;
            overflow-y:auto;
            overflow-x:hidden;
        }
        footer{
            border-top:2px dashed #1e1e1e
        }

        .header{
            background-color:#FFF;
        }

        .q-link-box{
            border: 1px dashed #1E1E1E;
            margin:1px;
            cursor:pointer;
        }

        .q-link-box{
            border: 1px dashed #1E1E1E;
            margin:1px;
            cursor:pointer;
        }
        
        .q-link-box-selected{
            border: 1px dashed #1E1E1E;
            background-color:#1E1E1E;
            color:#FFF;
            margin:1px;
            cursor:pointer;
        }
        .q-link-box-answered{
            border: 1px dashed #CB0C9F;
            background-color:#CB0C9F;
            color:#FFF;
            margin:1px;
            cursor:pointer;
        }
        /* .qp-question-palette {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 20px;
        }

        .qp-question-number {
            width: 20px;
            height: 20px;
            padding: 5px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .qp-current-question {
            background-color: #4CAF50;
            color: white;
        } */
        #draggableElement{
            cursor: move;
            position: absolute;
            z-index: 1000;
            display: none;
        }

        .wait-room{
            background-color:#1E1E1E
            color:#FFF;
        }
    </style>
  </head>
  <body>
    <div style="" class="exam S1RWM1Q">
        <div class="container-fluid text-center" >
            <div class="row mt-2 header">
                <div class="col">
                    <h6 style="padding-left:0px !important;text-align: left">Section <span id="section"></span>, Module <span id="module"></span>: <span id="title"></span></h6>
                    <p class="dropdown-toggle float-start btn btn-sm btn-default" id="directions-modal-btn"  style="cursor:pointer">Directions</p>
                    
                </div>
                <div class="col">
                    <h5 id="timer">32 : 00</h5>
                    <button class="btn btn-default btn-sm" id="hide-timer">Hide</button>
                </div>
                <div class="col">
                    <button class="btn btn-danger btn-sm float-end" id="">Logout</button>
                    <button id="calculator-modal-btn" class="btn btn-sm btn-default">Calculator</button>
                </div>
            </div>
            <hr class="hr">
            <hr>
            <div class="content">
                <div id="draggableElement" class="draggable" draggable="true">
                    <nav class="nav nav-fill" style="background-color:#000;color:#FFF;padding:8px">
                        <div class="col">Calculator</div>
                        <div class="col"><span id="move" style="margin-left:70px;cursor:move">Move</span></div>
                        <div class="col"><span id="fullscreen" style="margin-left:70px;cursor:pointer"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></span></div>
                        <div class="col"><h5 id="close-calculator" style="color:#FFF;margin-left:70px;cursor:pointer">X</h5></div>
                    </nav>
                    <div id="calculator"  style="width: 460px; height: 400px;max-width:100%;"></div>
                </div>
                <div class="mock-container" id="questions-container">
                    <div class="row main-row template d-none" >
                        <div class="col main-col question-information-container">
                            <p class="question-information"></p>  
                        </div>
                        <div class="col main-col">
                            <div class="main-question">
                                <div class="question-header">
                                    <div class="question-number-box">
                                        <span class="question-number">1</span>
                                    </div>
                                </div>
                                <div class="question-body">
                                    <p class="direct-question"></p>
                                    <div class="options">
                                        <div class="option">
                                            <span class="option-alpha"></span>
                                            <span class="option-text"></span>
                                            <input type="hidden" value="" name="question_number">
                                            <input type="hidden" value="" name="option">
                                        </div>
                                        <div class="option">
                                            <span class="option-alpha"></span>
                                            <span class="option-text"></span>
                                            <input type="hidden" value="" name="question_number">
                                            <input type="hidden" value="" name="option">
                                        </div>
                                        <div class="option">
                                            <span class="option-alpha"></span>
                                            <span class="option-text"></span>
                                            <input type="hidden" value="" name="question_number">
                                            <input type="hidden" value="" name="option">
                                        </div>
                                        <div class="option">
                                            <span class="option-alpha"></span>
                                            <span class="option-text"></span>
                                            <input type="hidden" value="" name="question_number">
                                            <input type="hidden" value="" name="option">
                                        </div>
                                        <input type="hidden" value="" name="question_answer">
                                        <input type="text" class="form-control fill_in d-none" data-answer="" data-question-number="" placeholder="Enter your answer here ..." value="" name="fill_in">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="footer" style="background-color:#FFF;">
                <div class="row">
                    <div class="col">
                        <h6 class="mt-2 student-name" style="text-align:left;">Godfred Abeiku Mills</h6>
                    </div>
                    <div class="col">
                        <button class="btn btn-dark dropdown-toggle" style="background-color:#000; color:#FFF" id="questions-modal-btn"  aria-expanded="false">Question <span id="current_question"></span> of <span id="total_questions"></span></button>
                    </div>
                    <div class="col">
                        <button class="btn btn-primary d-none" id="btn-q-back">Back</button>
                        <button class="btn btn-primary" id="btn-q-next">Next</button>
                        <button class="btn btn-dark d-none btn-q-submit" style="background-color:#1E1E1E;color:#FFF" id="btn-q-submit">Submit Module</button>
                    </div>
                </div>
            </footer>
            <!-- Directions -->
            <div class="modal fade" id="directions-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1></h1>
                            <h1 class="modal-title fs-5">Directions</h1>
                            <h1></h1>
                        </div>
                        <div class="modal-body">
                            <p style="font-family:TimesNewRoman;color:#1E1E1E;">The questions in this section address a number of important reading and writing skills. Each question includes one or more
                                passages, which may include a table or graph. Read each passage and question carefully, and then choose the best answer
                                to the question based on the passage(s).
                            </p>
                            <p style="font-family:TimesNewRoman;color:#1E1E1E;">All questions in the section are multiple-choice with four answer choices. Each question has a single best answer.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Questions Palette -->
            <div class="modal fade" id="questions-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1></h1>
                            <h1 class="modal-title fs-5" style="color:#1E1E1E">Questions Palette</h1>
                            <h1></h1>
                        </div>
                        <div class="modal-body">
                            <div>
                                <div class="row">
                                    <div class="col-md-3 q-link-box-legend" style="background-color:#FFF;color:#1E1E1E;margin-right:3px;border:1px dashed #1E1E1E">Unanswered</div>
                                    <div class="col-md-3 q-link-box-legend" style="background-color:#1E1E1E;color:#FFF;margin-right:3px;">Current</div>
                                    <div class="col-md-3 q-link-box-legend" style="background-color:#CB0C9F;color:#FFF;margin-right:3px;">Answered</div>
                                </div>
                                <hr style="background-color:#1E1E1E">
                                <div class="row questionPalette" id="questionPalette">
                                    <div class="col-md-1 q-link-box q-link d-none"></div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="break d-none" style="width:100%;min-height: 100vh !important;background-color:#1E1E1E;color:#fff;padding-top:100px;">
        <div class="container-fluid text-left">
            <div class="row">
                <div class="col-md-6">
                    <div style="padding:100px;padding-top:100px;">
                        <div style="border: 1px solid #FFF;border-radius:10px 10px 10px 10px">
                            <div>
                                <p class="text-center mt-2" style="color:#FFF">Remaining Break Time</p>
                                <h1 class="text-center timer-ten" style="color:#FFF">10:00</h1>
                            </div>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-warning resume-test mt-3" style="color:#1E1E1E;" id="resume-test">Resume Test</button>
                        </div>
                        <h6 class="mt-2 student-name" style="text-align:center;color:#FFF">Godfred Abeiku Mills</h6>
                    </div>
                </div>
                <div class="col-md-6">
                    <h3 style="font-weight:bolder;color:#fff">Test Break</h3>
                    <hr style="background-color:#FFF">
                    <h5 style="font-weight:bold;color:#fff">Take a Break: Do Not Close Your Device</h5>
                    <p>
                        After the break, a <span style="font-weight:bolder">Resume Testing Now</span> will appear and you'll start the next session
                    </p>
                    <p>
                        <ol>
                            <li>Do not disturb students who are still testing.</li>
                            <li>Do not exit the app or close your laptop.</li>
                            <li>Do not access phones, smartwatches, textbooks, notes, or the internet.</li>
                            <li>Do not eat or drink near any testing device.</li>
                            <li>Do not speak in the test room; outside the test</li>
                        </ol>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="end-of-test d-none" style="width:100%;min-height: 100vh !important;background-color:#1E1E1E;color:#fff;padding-top:100px;">
        <div class="container-fluid text-left">
            <div class="row">
                <div class="col-md-6">
                    <div style="padding:100px;padding-top:100px;">
                        <div style="border: 1px solid #FFF;border-radius:10px 10px 10px 10px">
                            <div>
                                <p class="text-center mt-2" style="color:#FFF">The Test Has Ended</p>
                                <h1 class="text-center" style="color:#FFF">Good Job!</h1>
                            </div>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-warning resume-test mt-3" style="color:#1E1E1E;">View Results Now</button>
                        </div>
                        <h6 class="mt-2 student-name" style="text-align:center;color:#FFF">Godfred Abeiku Mills</h6>
                    </div>
                </div>
                <div class="col-md-6">
                    <h3 style="font-weight:bolder;color:#fff">End of Test</h3>
                    <hr style="background-color:#FFF">
                    <h5 style="font-weight:bold;color:#fff">You cannot modify, review or submit new answers</h5>
                    <p>
                        You can view your results by clicking on  <span style="font-weight:bolder">View Results Now</span> button
                    </p>
                    <!-- <p>
                        <ol>
                            <li>Do not disturb students who are still testing.</li>
                            <li>Do not exit the app or close your laptop.</li>
                            <li>Do not access phones, smartwatches, textbooks, notes, or the internet.</li>
                            <li>Do not eat or drink near any testing device.</li>
                            <li>Do not speak in the test room; outside the test</li>
                        </ol>
                    </p> -->
                </div>
            </div>
        </div>
    </div>

    
    
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <!-- <script src="https://www.desmos.com/api/v1.8/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script> -->
    <script src="assets/js/demos/demos.js"></script>
    <script>
        // const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        // const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
        $(document).ready(function() {
            
            // Calculator
            var elt = document.getElementById('calculator');
            var calculator = Desmos.GraphingCalculator(elt);
            $("#close-calculator").click(function() {
                // $("#calculator-modal").modal("show");
                
                $('#draggableElement').toggle();
            });
            $("#fullscreen").click(function() {
                // calculator.resize();
            });
            
            // Make Calculator Ddraggable
            // Get the draggable element
            var draggableElement = document.getElementById('draggableElement');
            // Initialize the drag event listeners
            draggableElement.addEventListener('dragstart', function (event) {
                // Set the dragged data and specify the drag effect
                event.dataTransfer.setData('text/plain', 'Drag me');
            });

            // Handle the drop event
            document.addEventListener('drop', function (event) {
                event.preventDefault();

                // Get the position where the drop occurred relative to the document
                var x = event.clientX;
                var y = event.clientY;

                // Move the draggable element to the dropped position without offset
                draggableElement.style.left = x + 'px';
                draggableElement.style.top = y + 'px';
            });


            // Add a transitionend event listener to remove transition after drop
            draggableElement.addEventListener('transitionend', function () {
                draggableElement.style.transition = 'none';
            });

            // Prevent the default behavior for dragover events to enable drop
            document.addEventListener('dragover', function (event) {
                event.preventDefault();
            });

            // Add a dragend event listener to restore transition after drag
            draggableElement.addEventListener('dragend', function () {
                draggableElement.style.transition = 'all 0.1s ease';
            });
            // 
            $('.popover').css('max-width', '3000px');
            var number_of_questions
            var userAnswers = [];
            var currentQuestion;
            var currentQuestionNumber=1;
            var answer;
            var moduleScore=0;
            var current_section_number = 1;
            var title;
            var current_module_number = 1;
            var current_module_short = 'RW';
            var question_short = 'Q';
            var Section_short = 'S';
            var module_short = 'M';
            var url="data.json";
            // var current_section = 'S1RWM1Q';
            var current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
            $("#directions-modal-btn").click(function() {
                $("#directions-modal").modal("show");
            });

            $("#questions-modal-btn").click(function() {
                $("#questions-modal").modal("show");
            });
            
            $("#calculator-modal-btn").click(function() {
                // $("#calculator-modal").modal("show");
                
                $('#draggableElement').toggle();
            });
            

            $('#hide-timer').on('click', function() {
                $('#timer').toggle(); // Toggle the visibility of the content div
                var buttonText = $('#timer').is(':visible') ? 'Hide' : 'Show';
                $(this).text(buttonText);
            });

            var templateClone;
            // Fetch JSON data from the server using AJAX
            

            function getQuestions(url,currentQuestionNumber,current_section,current_module_number,current_section_number){
                var current_section_number = current_section_number;
                $.ajax({
                    url: url,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // Iterate through the JSON data
                    
                        // $('.template').empty();
                        number_of_questions = Object.keys(data).length;
                        console.log(number_of_questions);
                        $('#total_questions').text(number_of_questions);
                        currentQuestionNumber=1;
                        userAnswers = [];
                        // updateCountdown();
                        
                        $('#section').text(current_section_number)
                        $('#module').text(current_module_number);
                        if(current_section_number===1){
                            $('#title').text('Reading & Writing')
                        }else{
                            $('#title').text('Maths');
                        }
                        

                        $.each(data, function(index, question) {
                            console.log(data)
                            // Clone the template   
            
                            templateClone = $('.template').clone(true, true).removeClass('template').removeClass('d-none');
                            
                            // Fill in the values
                            templateClone.find('.question-information').text(question.question_information);
                            templateClone.find('.question-number').text(question.question_number);
                            templateClone.find('.direct-question').text(question.direct_question);
                            templateClone.find('.question-information').closest('.main-row').addClass(question.question_id);
                            templateClone.find('.question-information').closest('.main-row').addClass('d-none');
                            // var parentTemplateId = $('.question-information').closest('.main-row').removeClass(question.question_id);
                            // parentTemplateId = $('.question-information').closest('.main-row').addClass(question.question_id);
                            // $('#oldId').attr('id', 'newId');
                            
                            // Iterate through options and fill in values
                            if(question.options==="text"){
                                var optionDiv = templateClone.find('.option');
                                optionDiv.addClass('d-none')
                                templateClone.find('.fill_in').removeClass('d-none');
                                templateClone.find('.fill_in').attr('data-answer', question.answer);
                                templateClone.find('.fill_in').attr('data-question-number', question.question_number);
                            }else{
                                $.each(question.options, function(i, option) {
                                    var optionDiv = templateClone.find('.option').eq(i);
                                    optionDiv.find('.option-alpha').text(option.option_alpha);
                                    optionDiv.find('.option-text').text(option.option_text);
                                    optionDiv.find('input[name="question_number"]').val(question.question_number);
                                    optionDiv.find('input[name="option"]').val(option.option_alpha);
                                    templateClone.find('.options').eq(i).find('input[name="question_answer"]').val(question.answer);
                                    answer = question.answer;
                                });
                            }
                            
                            console.log(templateClone)
                            // Append the filled template to the container
                            $('#questions-container').append(templateClone);
                        }); 

                        $('.'+current_section+currentQuestionNumber).removeClass('d-none');
                        // alert('.'+current_section+currentQuestionNumber)
                        currentQuestionNumber = currentQuestionNumber;
                        // btn-q-submit-S1RWM1Q
                        // $('#btn-q-submit').attr('id','btn-q-submit-'+current_section)
                        currentQuestion = current_section+currentQuestionNumber;
                        $('.exam').addClass(current_section)
                        // alert(currentQuestion)
                    
                        userAnswers.push({ questionNumber: parseInt(currentQuestionNumber), optionSelected: null,answer:answer,is_correct:'FALSE' });
                        console.log(userAnswers);
                        $('#current_question').text(currentQuestionNumber);

                        // var questionPalette = $('#questionPalette');
                        var questionPaletteClone;
                        $.each(data, function(index, question) { 
                            var qpQuestionNumber = question.question_number;
                            var qpQuestionId = question.question_id;
                            questionPaletteClone = $('.q-link').clone().removeClass('q-link').removeClass('d-none');
                            questionPaletteClone.text(qpQuestionNumber);
                            questionPaletteClone.addClass('QP'+current_section+qpQuestionNumber)

                            // Append the question number element to the palette
                            // questionPalette.append(questionNumberElement);
                            console.log(questionPaletteClone)
                            $('#questionPalette').append(questionPaletteClone);
                            $('#questionPalette2').append(questionPaletteClone);
                        });
                        checkSectionModuleTimer();
                    },
                    error: function() {
                        console.error('Error fetching data from the server.');
                    }
                });
            }
            
            getQuestions(url,1,current_section,current_module_number,current_section_number);

            $('#questionPalette').on('click', '.q-link-box', function() {
                var qp_qn = $(this).text();
                qp_qn = parseInt(qp_qn);
                $('.main-row').addClass('d-none');
                $('.'+current_section+qp_qn).removeClass('d-none');
                console.log(current_section+qp_qn);
                
                $('.q-link-box').removeClass('q-link-box-selected');
                $(this).addClass('q-link-box-selected');
                
                if(currentQuestionNumber < qp_qn){
                    currentQuestionNumber = qp_qn;
                }else if(currentQuestionNumber > qp_qn){
                    currentQuestionNumber = qp_qn;
                }else{
                    currentQuestionNumber = qp_qn;
                }
                console.log(currentQuestionNumber,qp_qn,number_of_questions);
                if(currentQuestionNumber===1){
                    $('#btn-q-back').addClass('d-none');
                }else{
                    $('#btn-q-back').removeClass('d-none');
                }
                if(currentQuestionNumber===number_of_questions){
                    $('#btn-q-submit').removeClass('d-none');
                    $('#btn-q-next').addClass('d-none');
                }else{
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                }
                $('#current_question').text(currentQuestionNumber);
            });
            // 
            $('#btn-q-next').click(function(){
                var visibleMainQuestion = $('.main-row:not(.d-none)');
                // Check if any element has a class that starts with 'Q'
                // console.log(current_section)
                var classesStartingWithQ = visibleMainQuestion.map(function() {
                    return $(this).attr('class').split(' ').filter(function(className) {
                        return className.startsWith(current_section);
                    });
                }).get();
                var questionClass = JSON.stringify(classesStartingWithQ);
                $('.main-row').addClass('d-none');
                currentQuestionNumber++;
                answer = null;
                // userAnswers.push({ questionNumber: parseInt(currentQuestionNumber), optionSelected: null,answer:answer,is_correct:'FALSE'});
                $('#current_question').text(currentQuestionNumber);
                // updateAnswer(parseInt(currentQuestionNumber), null, null, 'FALSE');
                if(currentQuestionNumber!=1){
                    $('#btn-q-back').removeClass('d-none');
                }else{
                    $('#btn-q-back').addClass('d-none');
                }
                console.log(currentQuestionNumber,number_of_questions,current_section,'watch')
                
                // Split the string at 'Q' and get the part after 'Q'
                var partAfterQ = questionClass.split('Q')[1];
                
                // Convert the extracted part to an integer
                console.log(parseInt(partAfterQ)+1,current_section)
                var integerValue = parseInt(partAfterQ)+1;
                var nextQuestion = current_section+integerValue;
                console.log(nextQuestion)
                currentQuestionNumber = integerValue;
                if(currentQuestionNumber===number_of_questions){
                    $('#btn-q-submit').removeClass('d-none');
                    $('#btn-q-next').addClass('d-none');
                }
                
                $('.'+currentQuestion).addClass('d-none');
                $('.'+nextQuestion).removeClass('d-none');
                $('.q-link-box').removeClass('q-link-box-selected');
                $('.QP'+current_section+currentQuestionNumber).addClass('q-link-box-selected');
                currentQuestion = nextQuestion;
                
                // $('html, body').animate({
                //     scrollTop: $('.'+nextQuestion).offset().top
                // }, 1000);
            })

            $('#btn-q-back').click(function(){
                var visibleMainQuestion = $('.main-row:not(.d-none)');
                // Check if any element has a class that starts with 'Q'
                var classesStartingWithQ = visibleMainQuestion.map(function() {
                    return $(this).attr('class').split(' ').filter(function(className) {
                        return className.startsWith(current_section);
                    });
                }).get();
                var questionClass = JSON.stringify(classesStartingWithQ);
                
                // Split the string at 'Q' and get the part after 'Q'
                var partAfterQ = questionClass.split('Q')[1];
                console.log(currentQuestionNumber)
                partAfterQ = parseInt(partAfterQ)+1;
                console.log(partAfterQ)
                currentQuestionNumber = parseInt(currentQuestionNumber)-1;
                $('#current_question').text(currentQuestionNumber);
                if(currentQuestionNumber===1){
                    $('#btn-q-back').addClass('d-none');
                }else{
                    $('#btn-q-back').removeClass('d-none');
                }
                if(currentQuestionNumber!==number_of_questions){
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                }
                var nextQuestion = current_section+currentQuestionNumber;
                console.log(nextQuestion)
                
                $('.'+currentQuestion).addClass('d-none');
                $('.'+nextQuestion).removeClass('d-none');
                $('.q-link-box').removeClass('q-link-box-selected');
                $('.QP'+current_section+currentQuestionNumber).addClass('q-link-box-selected');
                currentQuestion = nextQuestion;
                // $('html, body').animate({
                //     scrollTop: $('.'+nextQuestion).offset().top
                // }, 1000);
            });

            function updateAnswer(questionNumber, newOptionSelected, correctAnswer,is_correct) {
                // Find the index of the record with the matching questionNumber
                var indexToUpdate = userAnswers.findIndex(function(answer) {
                    return answer.questionNumber === questionNumber;
                });
                if(newOptionSelected===correctAnswer && newOptionSelected!=null){
                    is_correct = 'TRUE';
                }else{
                    is_correct = 'FALSE';
                }

                // If the record is found, update the optionSelected property
                if (indexToUpdate !== -1) {
                    userAnswers[indexToUpdate].optionSelected = newOptionSelected;
                    userAnswers[indexToUpdate].answer = correctAnswer;
                    if(newOptionSelected===correctAnswer){
                        userAnswers[indexToUpdate].is_correct = 'TRUE';
                    }else{
                        userAnswers[indexToUpdate].is_correct = 'FALSE';
                    }
                    console.log('Answer for question', questionNumber, 'updated to', newOptionSelected);
                } else {
                    console.log('Answer for question', questionNumber, 'not found');
                    userAnswers.push({ questionNumber: questionNumber, optionSelected: newOptionSelected,answer:correctAnswer,is_correct:is_correct});
                }
            }

            $('.options').on('click', '.option', function() {
                // Get the values of the input fields within the clicked option
                var questionNumber = $(this).find('input[name="question_number"]').val();
                var optionValue = $(this).find('input[name="option"]').val();
                console.log(questionNumber,optionValue)
                // userAnswers.push({ questionNumber: parseInt(questionNumber), optionSelected: optionValue });
                answer = $(this).parent('.options').find('input[name="question_answer"]').val();
                updateAnswer(parseInt(questionNumber), optionValue,answer,'FALSE');
                $(this).siblings('.option').removeClass('option-selected');
                $(this).siblings('.option').find('.option-alpha').removeClass('option-alpha-selected');
                $(this).find('.option-alpha').addClass('option-alpha-selected');
                $(this).addClass('option-selected');
                // $('.q-link-box').removeClass('q-link-box-selected');
                $('.QP'+current_section+questionNumber).addClass('QP'+current_section);
                $('.QP'+current_section+questionNumber).addClass('q-link-box-answered');
               
                // console.log('Question Number:', questionNumber);
                // console.log('Option Value:', optionValue);
                console.log(userAnswers);
            });


            $('.options').on('blur', '.fill_in', function() {
                // Get the values of the input fields within the clicked option
                var questionNumber = $(this).attr('data-question-number');
                optionValue = $(this).val();
                var answer = $(this).attr('data-answer');
                var is_correct;
                if(optionValue===answer){
                    is_correct="TRUE";
                }else{
                    is_correct="FALSE";
                }
                updateAnswer(parseInt(questionNumber), optionValue,answer,is_correct);
                $('.QP'+current_section+questionNumber).addClass('QP'+current_section);
                $('.QP'+current_section+questionNumber).addClass('q-link-box-answered');
                
                // userAnswers.push({ questionNumber: parseInt(questionNumber), optionSelected: optionValue,answer:answer,is_correct:is_correct});
                console.log(userAnswers)
            });

            // Function to count correct answers
            function countCorrectAnswers(responses) {
                var correctCount = 0;

                responses.forEach(function(response) {
                    if (response.is_correct.toUpperCase() === "TRUE") {
                        correctCount++;
                    }
                });

                return correctCount;
            }

            function countWrongAnswers(responses) {
                var WrongCount = 0;

                responses.forEach(function(response) {
                    if (response.is_correct.toUpperCase() === "FALSE") {
                        WrongCount++;
                    }
                });

                return WrongCount;
            }

            $('body').on('click','#btn-q-submit',function(){
                var numberOfCorrectAnswers = countCorrectAnswers(userAnswers);
                var numberOfWrongAnswers = countWrongAnswers(userAnswers);
                console.log(userAnswers,numberOfCorrectAnswers,numberOfWrongAnswers);
                // current_section_number = 1;
                // current_module_number = 1;
                if(current_section_number===1){
                    current_module_short = 'RW';
                }else{
                    current_module_short = 'M';
                }
                question_short = 'Q';
                Section_short = 'S';
                module_short = 'M';
                clearInterval(countdownInterval);
                console.log (current_module_number,current_section)
                // if(current_module_number===1){
                //     $('.exam').removeClass(current_section);
                //     $('.'+current_section).removeClass(current_section);
                //     $('.'+current_section+currentQuestionNumber).addClass('d-none')
                //     $('.QP'+current_section).addClass('d-none')
                //     $('.main-row').addClass('d-none')
                //     current_section_number = current_section_number;
                //     current_module_number=2;
                //     current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                    
                //     // alert(current_module_number)
                //     // $('.template').removeClass('d-none');
                //     $('.exam').addClass(current_section);
                //     $('.'+current_section).removeClass('d-none')
                //     // $('#question-container').empty();
                //     // var elementToRemove = $("#S1RWM1Q1 "); // Assuming you want to start from the first child
                //     // elementToRemove.remove();
                //     url = 'data2.json';
                //     currentQuestionNumber=1;
                //     // $(this).attr('id','btn-q-submit-'+current_section);
                //     $(this).addClass('d-none');
                //     $('#btn-q-back').addClass('d-none');
                //     $('#btn-q-next').removeClass('d-none');
                //     $('.QP'+current_section).addClass('d-none');
                //     getQuestions(url,1,current_section,current_module_number,current_section_number);
                    
                    
                //     console.log(url)
                // }else if(current_module_number===2){
                //     $('.'+current_section).addClass('d-none')
                //     current_section_number = 2;
                //     current_module_number=1;
                //     // $('.'+current_section).addClass('d-none')
                //     current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                //     $('.break').removeClass('d-none');
                //     var countdownIntervalTen = setInterval(function() {
                //         countDownTimeTenMins--;
                //         updateCountdownTen();

                //         // Check if countdown reaches zero
                //         if (countDownTimeTenMins <= 0) {
                //             clearInterval(countdownIntervalTen); // Stop the countdown when it reaches zero
                //             alert("Time's up!"); // You can customize this action
                //         }
                //     }, 1000);
                // }
                if(current_module_number===1 && current_section_number==1){
                    $('.exam').removeClass(current_section);
                    $('.'+current_section).removeClass(current_section);
                    $('.'+current_section+currentQuestionNumber).addClass('d-none')
                    $('.QP'+current_section).addClass('d-none')
                    $('.q-link-box').addClass('d-none')
                    $('.main-row').addClass('d-none')
                    current_section_number = current_section_number;
                    current_module_number=2;
                    if(current_section_number===1){
                        current_module_short = 'RW';
                    }else{
                        current_module_short = 'M';
                    }
                    current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                    console.log("current Section:",current_section)
                    $('.exam').addClass(current_section);
                    $('.'+current_section).removeClass('d-none')
                    // $('#question-container').empty();
                    var elementToRemove = $("#S1RWM1Q1 "); // Assuming you want to start from the first child
                    elementToRemove.remove();
                    url = 'data2.json';
                    currentQuestionNumber=1;
                    // $(this).attr('id','btn-q-submit-'+current_section);
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-back').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                    $('.QP'+current_section).addClass('d-none');
                    countdownTime = 1 * 10;
                    getQuestions(url,1,current_section,current_module_number,current_section_number);
                    console.log(url)
                }else if(current_module_number===2 && current_section_number==1){
                    $('.'+current_section).addClass('d-none')
                    $('.'+current_section).removeClass(current_section);
                    $('.'+current_section+currentQuestionNumber).addClass('d-none')
                    $('.QP'+current_section).addClass('d-none')
                    $('.q-link-box').addClass('d-none')
                    $('.main-row').addClass('d-none')
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-back').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                    $('.QP'+current_section).addClass('d-none');
                    current_section_number = 2;
                    current_module_number=1;
                    $('.'+current_section).addClass('d-none')
                    if(current_section_number===1){
                        current_module_short = 'RW';
                    }else{
                        current_module_short = 'M';
                    }
                    current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                    $('.break').removeClass('d-none')
                    countDownTimeTenMins = 1 * 10;
                    countdownIntervalTen = setInterval(function() {
                        countDownTimeTenMins--;
                        updateCountdownTen();
                        
                        // Check if countdown reaches zero
                        if (countDownTimeTenMins <= 0) {
                            clearInterval(countdownIntervalTen); // Stop the countdown when it reaches zero
                            // alert("Time's up!"); // You can customize this action
                            $('.break').addClass('d-none')
                            $('.exam').addClass(current_section);
                            $('.'+current_section).removeClass('d-none')
                            url='data3.json';
                            
                            getQuestions(url,1,current_section,current_module_number,current_section_number);
                        }
                    }, 1000);
                }else if(current_module_number===1 && current_section_number==2){
                    current_section_number=2;
                    $('.exam').removeClass(current_section);
                    $('.'+current_section).removeClass(current_section);
                    $('.'+current_section+currentQuestionNumber).addClass('d-none')
                    $('.QP'+current_section).addClass('d-none')
                    $('.q-link-box').addClass('d-none')
                    $('.main-row').addClass('d-none')
                    current_section_number = current_section_number;
                    current_module_number=2;
                    if(current_section_number===1){
                        current_module_short = 'RW';
                    }else{
                        current_module_short = 'M';
                    }
                    current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                    console.log("current Section:",current_section)
                    $('.exam').addClass(current_section);
                    $('.'+current_section).removeClass('d-none')
                    // $('#question-container').empty();
                    var elementToRemove = $("#S1RWM1Q1 "); // Assuming you want to start from the first child
                    elementToRemove.remove();
                    url = 'data4.json';
                    currentQuestionNumber=1;
                    // $(this).attr('id','btn-q-submit-'+current_section);
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-back').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                    $('.QP'+current_section).addClass('d-none');
                    countdownTime = 1 * 10;
                    getQuestions(url,1,current_section,current_module_number,current_section_number);
                    console.log(url)
                }else if(current_module_number===2 && current_section_number==2){
                    $('.'+current_section).addClass('d-none')
                    $('.'+current_section).removeClass(current_section);
                    $('.'+current_section+currentQuestionNumber).addClass('d-none')
                    $('.QP'+current_section).addClass('d-none')
                    $('.q-link-box').addClass('d-none')
                    $('.main-row').addClass('d-none')
                    $('#btn-q-submit').addClass('d-none');
                    $('#btn-q-back').addClass('d-none');
                    $('#btn-q-next').removeClass('d-none');
                    $('.QP'+current_section).addClass('d-none');
                    current_section_number = 2;
                    current_module_number=1;
                    $('.'+current_section).addClass('d-none')
                    if(current_section_number===1){
                        current_module_short = 'RW';
                    }else{
                        current_module_short = 'M';
                    }
                    current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                    $('.end-of-test').removeClass('d-none')
                    // alert("Time's up!");
                }
                
            });

            var countdownTime = 1 * 10;
            // Set up interval to update countdown every second
            var countdownInterval;
            var countdownIntervalTen;
           function checkSectionModuleTimer(){
                countdownTime = 1 * 10;
                countdownInterval = setInterval(function() {
                    countdownTime--;
                    updateCountdown();

                    // Check if countdown reaches zero
                    if (countdownTime <= 0) {
                        clearInterval(countdownInterval); // Stop the countdown when it reaches zero
                        var numberOfCorrectAnswers = countCorrectAnswers(userAnswers);
                        var numberOfWrongAnswers = countWrongAnswers(userAnswers);
                        console.log(userAnswers,numberOfCorrectAnswers,numberOfWrongAnswers);
                        
                        // current_section_number = 1;
                        // current_module_number = 1;
                        if(current_section_number===1){
                            current_module_short = 'RW';
                        }else{
                            current_module_short = 'M';
                        }
                        
                        question_short = 'Q';
                        Section_short = 'S';
                        module_short = 'M';
                        
                        console.log (current_module_number,current_section)
                        if(current_module_number===1 && current_section_number==1){
                            $('.exam').removeClass(current_section);
                            $('.'+current_section).removeClass(current_section);
                            $('.'+current_section+currentQuestionNumber).addClass('d-none')
                            $('.QP'+current_section).addClass('d-none')
                            $('.q-link-box').addClass('d-none')
                            $('.main-row').addClass('d-none')
                            current_section_number = current_section_number;
                            current_module_number=2;
                            if(current_section_number===1){
                                current_module_short = 'RW';
                            }else{
                                current_module_short = 'M';
                            }
                            current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                            console.log("current Section:",current_section)
                            $('.exam').addClass(current_section);
                            $('.'+current_section).removeClass('d-none')
                            // $('#question-container').empty();
                            var elementToRemove = $("#S1RWM1Q1 "); // Assuming you want to start from the first child
                            elementToRemove.remove();
                            url = 'data2.json';
                            currentQuestionNumber=1;
                            // $(this).attr('id','btn-q-submit-'+current_section);
                            $('#btn-q-submit').addClass('d-none');
                            $('#btn-q-back').addClass('d-none');
                            $('#btn-q-next').removeClass('d-none');
                            $('.QP'+current_section).addClass('d-none');
                            countdownTime = 1 * 10;
                            getQuestions(url,1,current_section,current_module_number,current_section_number);
                            console.log(url)
                        }else if(current_module_number===2 && current_section_number==1){
                            $('.'+current_section).addClass('d-none')
                            $('.'+current_section).removeClass(current_section);
                            $('.'+current_section+currentQuestionNumber).addClass('d-none')
                            $('.QP'+current_section).addClass('d-none')
                            $('.q-link-box').addClass('d-none')
                            $('.main-row').addClass('d-none')
                            $('#btn-q-submit').addClass('d-none');
                            $('#btn-q-back').addClass('d-none');
                            $('#btn-q-next').removeClass('d-none');
                            $('.QP'+current_section).addClass('d-none');
                            current_section_number = 2;
                            current_module_number=1;
                            $('.'+current_section).addClass('d-none')
                            if(current_section_number===1){
                                current_module_short = 'RW';
                            }else{
                                current_module_short = 'M';
                            }
                            current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                            $('.break').removeClass('d-none')
                            countDownTimeTenMins = 1 * 10;
                            countdownIntervalTen = setInterval(function() {
                                countDownTimeTenMins--;
                                updateCountdownTen();
                                
                                // Check if countdown reaches zero
                                if (countDownTimeTenMins <= 0) {
                                    clearInterval(countdownIntervalTen); // Stop the countdown when it reaches zero
                                    // alert("Time's up!"); // You can customize this action
                                    $('.break').addClass('d-none')
                                    $('.exam').addClass(current_section);
                                    $('.'+current_section).removeClass('d-none')
                                    url='data3.json';
                                    
                                    getQuestions(url,1,current_section,current_module_number,current_section_number);
                                }
                            }, 1000);
                        }else if(current_module_number===1 && current_section_number==2){
                            current_section_number=2;
                            $('.exam').removeClass(current_section);
                            $('.'+current_section).removeClass(current_section);
                            $('.'+current_section+currentQuestionNumber).addClass('d-none')
                            $('.QP'+current_section).addClass('d-none')
                            $('.q-link-box').addClass('d-none')
                            $('.main-row').addClass('d-none')
                            current_section_number = current_section_number;
                            current_module_number=2;
                            if(current_section_number===1){
                                current_module_short = 'RW';
                            }else{
                                current_module_short = 'M';
                            }
                            current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                            console.log("current Section:",current_section)
                            $('.exam').addClass(current_section);
                            $('.'+current_section).removeClass('d-none')
                            // $('#question-container').empty();
                            var elementToRemove = $("#S1RWM1Q1 "); // Assuming you want to start from the first child
                            elementToRemove.remove();
                            url = 'data4.json';
                            currentQuestionNumber=1;
                            // $(this).attr('id','btn-q-submit-'+current_section);
                            $('#btn-q-submit').addClass('d-none');
                            $('#btn-q-back').addClass('d-none');
                            $('#btn-q-next').removeClass('d-none');
                            $('.QP'+current_section).addClass('d-none');
                            countdownTime = 1 * 10;
                            getQuestions(url,1,current_section,current_module_number,current_section_number);
                            console.log(url)
                        }else if(current_module_number===2 && current_section_number==2){
                            $('.'+current_section).addClass('d-none')
                            $('.'+current_section).removeClass(current_section);
                            $('.'+current_section+currentQuestionNumber).addClass('d-none')
                            $('.QP'+current_section).addClass('d-none')
                            $('.q-link-box').addClass('d-none')
                            $('.main-row').addClass('d-none')
                            $('#btn-q-submit').addClass('d-none');
                            $('#btn-q-back').addClass('d-none');
                            $('#btn-q-next').removeClass('d-none');
                            $('.QP'+current_section).addClass('d-none');
                            current_section_number = 2;
                            current_module_number=1;
                            $('.'+current_section).addClass('d-none')
                            if(current_section_number===1){
                                current_module_short = 'RW';
                            }else{
                                current_module_short = 'M';
                            }
                            current_section = Section_short+current_section_number+current_module_short+module_short+current_module_number+question_short;
                            $('.end-of-test').removeClass('d-none')
                            // alert("Time's up!");
                        }
                    }
                }, 1000);
           }
            // Display initial countdown
            

            // var countdownTime = 1 * 10;

            // Function to update the countdown display
            function updateCountdown() {
                var minutes = Math.floor(countdownTime / 60);
                var seconds = countdownTime % 60;
                var formattedTime = pad(minutes) + ":" + pad(seconds);
                $("#timer").text(formattedTime);
                $(".timer").text(formattedTime);
            }

            // Function to pad single digits with a leading zero
            function pad(number) {
                return (number < 10) ? "0" + number : number;
            }

            // Ten (10)Minutes

            
            var countDownTimeTenMins = 1 * 5;

            // Display initial countdown
            // updateCountdownTen();

            // Set up interval to update countdown every second
               
            // Function to update the countdown display
            function updateCountdownTen() {
                var minutes = Math.floor(countDownTimeTenMins / 60);
                var seconds = countDownTimeTenMins % 60;
                var formattedTime = pad(minutes) + ":" + pad(seconds);
                $(".timer-ten").text(formattedTime);
            }

            $('#resume-test').click(function(){
                $('#resume-test').text('Resuming Test...');
                countDownTimeTenMins=0;
            });

            

        });
    </script>

  </body>
</html>
