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 );
        } );
   
})