Jquery or Javascript Start Exam Time

 <script>

function startTimer() {
    var date = "<?php echo $date ?>"; // dynamic date
    var time = "<?php echo $time ?>"; // dynamic time current time to 40 minutes (example)
    var startTime = new Date(date);
    var endTime = new Date(startTime.getTime() + time * 60000);

    console.log(date + " " + time);
        var timerInterval = setInterval(function() {
        var remainingTime = endTime - new Date();
        if (remainingTime <= 0) {
                clearInterval(timerInterval);
                $('#examTime').text('Time\'s up!');
                $('#timeUpModal').modal('show');
            // auto Submit Form
            setTimeout(() => {
                    submitForm();
                }, 7000);
} else {
        var minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
        var seconds = Math.floor((remainingTime / 1000) % 60);
        minutes = (minutes < 10 ? '0' : '') + minutes;
        seconds = (seconds < 10 ? '0' : '') + seconds;
        $('#examTime').text('Time Remaining: ' + minutes + ':' + seconds);
        }
    }, 1000);
}

startTimer();

function submitForm()
{
        // if you use this method can you check (name='submit') --> change name submit1 or else any words
        document.getElementById('objForm').submit();
}
</script>

Jquery Step Form

 <div class="col-xl-12">

   <div class="card">
      <div class="card-header">
         <h4 class="card-title">Multiple Choice Questions (MCQ)</h4>
      </div>
      <div class="card-body">
         <div id="smartwizard" class="form-wizard order-create">
            <ul class="nav nav-wizard">
               <?php $k=1; foreach ($questions as $key => $val) { ?>
               <li>
                  <a onclick="goToForm(<?= $k ?>)" id="active<?= $k ?>" class="nav-link <?= ($k == 1) ? 'active':'' ?>" href="javascript:void(0)">
                     <span></span>
                     <p class="mt-2 mb-0"><?= $key ?></p>
                  </a>
               </li>
               <?php $k++; } ?>
            </ul>
            <?php
               if (isset($questions)) {
               $cont = 0;
               foreach ($questions as $key => $val) {
               foreach ($val as $ky=>$row) {
               $cont += 1;
               }
               }
               
               
               $tot = 0;
               $j = 1; ?>
            <form method="POST" action="<?= base_url('ExamController/storeExam') ?>" id="storeForm">
               <input type="hidden" name="user_id" value="<?= $userData['userId'] ?>" />
               <input type="hidden" name="schedule_id" value="<?= $userData['schedule'] ?>" />
               <input type="hidden" name="category_id" value="<?= $userData['categoryId'] ?>" />
               <div class="tab-content">
                  <?php foreach ($questions as $key => $val) { ?>
                  <div class="Questiontab<?= $j ?> tbs" style="display:<?= ($j > 1) ? 'none':'block' ?>">
                     <div id="wizard_Service<?= $val['categoryId'] ?>" class="tab-pane " role="tabpanel">
                        <?php foreach($val as $k=>$res){
                           $tot +=1;
                           ?>
                        <h4 class="text-left"><?= $k ?></h4>
                        <?php foreach ($res as $ky=>$row) {
                           ?>
                        <div class="row">
                           <div class="col-lg-12 mb-2">
                              <h5><?= $ky+1; ?> ) <?= strip_tags($row->question) ?></h5>
                              <input type="hidden" name="question[]" value="<?= $row->id ?>" />
                              <input type="hidden" name="org_ques[]" value="<?= $row->answer ?>" />
                           </div>
                           <div class="col-lg-12 mb-2">
                              <div class="form-check custom-checkbox mb-3 checkbox-warning">
                                 <input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="a">
                                 <label class="form-check-label" for="customRadioBox"><?= $row->option_a ?></label>
                              </div>
                           </div>
                           <div class="col-lg-12 mb-2">
                              <div class="form-check custom-checkbox mb-3 checkbox-warning">
                                 <input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="b">
                                 <label class="form-check-label" for="customRadioBox"><?= $row->option_b ?></label>
                              </div>
                           </div>
                           <div class="col-lg-12 mb-2">
                              <div class="form-check custom-checkbox mb-3 checkbox-warning">
                                 <input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="c">
                                 <label class="form-check-label" for="customRadioBox"><?= $row->option_c ?></label>
                              </div>
                           </div>
                           <div class="col-lg-12 mb-2">
                              <div class="mb-3">
                                 <div class="form-check custom-checkbox mb-3 checkbox-warning">
                                    <input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="d">
                                    <label class="form-check-label" for="customRadioBox"><?= $row->option_d ?></label>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <?php } ?>
                        <div class="row">
                           <div class="col-md-7"></div>
                           <div class="col-md-3">
                              <?php if ($j != 1) { ?>
                              <a href="javascript:previousQuestion(<?= $j ?>)" class="btn btn-primary pull-right">Previous</a>
                              <?php } ?>
                              <?php if($tot == $cont){ ?>
                              <input type="submit" name="submitt" value="Submit" class="btn btn-info" />
                              <?php }else{ ?>
                              <a href="javascript:nextQuestion(<?= $j ?>)" class="btn btn-primary pull-right">Next</a>
                              <?php } ?>
                           </div>
                        </div>
                     </div>
                  </div>
                  <?php $j++;
                     } } ?>
               </div>
            </form>
            <?php } ?>
         </div>
      </div>
   </div>
</div>

JS Functions:

function previousQuestion(page) {
    var pre = page - 1;
    $('.Questiontab' + page).hide();
    $('#active'+pre).addClass('active');
    $('#active'+page).removeClass('active');
    if (pre == 0) {
    $('.Questiontab1').show();
    } else {
    $('.Questiontab' + pre).show();
        }
    $('html, body').scrollTop(0);
}

function nextQuestion(page) {
    var next = page + 1;
    $('.Questiontab' + page).hide();
    $('.Questiontab' + next).show();
    $('#active'+next).addClass('active');
    $('#active'+page).removeClass('active');
    $('html, body').scrollTop(0);
}

function goToForm(page)
{
    $('.Questiontab' + page).removeClass('tbs');
    $('.nav-link').removeClass('active');
    $('#active'+page).addClass('active');
    $('.tbs').hide(); // Hide all forms
    $('.Questiontab' + page).show();
    $('.Questiontab' + page).addClass('tbs');	
}

Disable RightClick and Copy Paste and f12 Key

$(document).ready(function(){
    //Right-click disabled
    $(document).on("contextmenu", function(e) {
    e.preventDefault();        
    });
});

$(document).on('cut copy paste', function(event) {
    event.preventDefault();
});

// F12 key Disabled
document.onkeydown = function (e) {
    if (e.keyCode == 123) { 
        return false;
        }
};
CKeditor:


ClassicEditor
        .create( document.querySelector('#editor'+j))
            .then( editor => {
                editor.editing.view.document.on('paste', (event, data) => {                
                    event.stop();
                    });
                editor.config.disableNativeSpellChecker = true;
                editor.editing.view.document.on('cut', (event, data) => {
                event.stop(); // Prevent cut
                });
            editor.editing.view.document.on('keyup', (event, data) => {               
            handleKeyUp(editor);
        });

function handleKeyUp(editor) {
        let content = editor.getData();
        let characterCount = content.split(" ").length;
        if (characterCount >= maxLength) {
            editor.isReadOnly = true;
            return false;
            }else{
        editor.isReadOnly = false;
            }
        }
    } )
        .catch( error => {
        console.error( error );
        } );
   
})

JQuery Custom Rating

 <style>

.rating {

  font-size: 24px;

}

.star {

  cursor: pointer;

  color: gray;

}

.star:hover,

.star.active {

  color: rgb(255, 207, 0);

}

</style>

<div class="form-group">

                                            <p class="mg-b-10" id="leadRatingTxt">Lead Rating (<?= $lead_rating ? $lead_rating: 0 ?>)<span class="text-danger">*</span></p> 

                                            <div class="rating">

                                                <span class="star" data-value="1">&#9733;</span>

                                                <span class="star" data-value="2">&#9733;</span>

                                                <span class="star" data-value="3">&#9733;</span>

                                                <span class="star" data-value="4">&#9733;</span>

                                                <span class="star" data-value="5">&#9733;</span>

                                                <span class="star" data-value="6">&#9733;</span>

                                                <span class="star" data-value="7">&#9733;</span>

                                                <span class="star" data-value="8">&#9733;</span>

                                                <span class="star" data-value="9">&#9733;</span>

                                                <span class="star" data-value="10">&#9733;</span>

                                            </div>

                                            <input type="hidden" id="lead_rating"  name="lead_rating" value="" />

                                              @error('lead_rating')

                                            <span class="text-danger">{{ $message }}</span>

                                            @enderror

                                        </div>

                                    </div>

Script:

var selectedRating = 0;

<?php if(isset($lead_rating) && $lead_rating > 0){ ?>

    highlightStars('<?= $lead_rating ?>')

<?php } ?>

$('.star').on('mouseover', function() {

  var value = $(this).data('value');

  highlightStars(value);

});

$('.star').on('mouseout', function() {

  highlightStars(selectedRating);

});

$('.star').on('click', function() {

  selectedRating = $(this).data('value');

  $('#leadRatingTxt').text("Lead Rating ("+selectedRating+")");

  $('#lead_rating').val(selectedRating);

});

function highlightStars(count) {

  $('.star').removeClass('active');

  $('.star:lt(' + count + ')').addClass('active');

}