<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() 
{
   var str = "The rain in SPAIN stays mainly in the plain"; 
   var res = str.match(/z/);
   If(res)
      res=</h6></span>
                                                    
                                                                                                      </div>
                                              </div>
                                              <div class="card-body">
                                                 <div class="main-content">
                                                    <div class="options">
                                                      <ul class="options-list">
                                                                                                                <li data-option="A" id="5135A">
                                                          <span class="symbol">A.</span>
                                                          <span class="option-text">True</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="B" id="5135B">
                                                          <span class="symbol">B.</span>
                                                          <span class="option-text">False</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="C" id="5135C">
                                                          <span class="symbol">C.</span>
                                                          <span class="option-text">Error</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="D" id="5135D">
                                                          <span class="symbol">D.</span>
                                                          <span class="option-text">Handling</span>
                                                          
                                                        </li> 
                                                        
                                                      </ul>
                                                    </div>
                                              
                                                    Correct Option: B</br>Explanation: <p>The match method searches the given string for matches. The output will be false since the character z is absent from the string.</p>                                                   
                                                  </div>
                                             </div>
                                        </div>
                                  </div>
                                                                     <div class="nacc">
                                         <div class="card mb-2">
                                              <div class="card-header">
                                                  <div class="gk-image">
                                                    <span style="color:#4e5050"><h6>Q: Which method is given the setInterval() return value to stop further calls?</h6></span>
                                                    
                                                                                                      </div>
                                              </div>
                                              <div class="card-body">
                                                 <div class="main-content">
                                                    <div class="options">
                                                      <ul class="options-list">
                                                                                                                <li data-option="A" id="5077A">
                                                          <span class="symbol">A.</span>
                                                          <span class="option-text">clearInvocation()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="B" id="5077B">
                                                          <span class="symbol">B.</span>
                                                          <span class="option-text">cancelInvocation()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="C" id="5077C">
                                                          <span class="symbol">C.</span>
                                                          <span class="option-text">clearInterval()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="D" id="5077D">
                                                          <span class="symbol">D.</span>
                                                          <span class="option-text">clear()</span>
                                                          
                                                        </li> 
                                                        
                                                      </ul>
                                                    </div>
                                              
                                                    Correct Option: C</br>Explanation: <p>SetInterval(), like <code>setTimeout()</code>, produces a value that can be used with <code>clearInterval()</code> to stop any more calls to the scheduled function. <br>The parameter for the <code>clearInterval()</code> function is the ID value returned by<code> setInterval()</code>.</p>                                                   
                                                  </div>
                                             </div>
                                        </div>
                                  </div>
                                                                     <div class="nacc">
                                         <div class="card mb-2">
                                              <div class="card-header">
                                                  <div class="gk-image">
                                                    <span style="color:#4e5050"><h6>Q: The original CSS version is</h6></span>
                                                    
                                                                                                      </div>
                                              </div>
                                              <div class="card-body">
                                                 <div class="main-content">
                                                    <div class="options">
                                                      <ul class="options-list">
                                                                                                                <li data-option="A" id="5127A">
                                                          <span class="symbol">A.</span>
                                                          <span class="option-text">CSS1</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="B" id="5127B">
                                                          <span class="symbol">B.</span>
                                                          <span class="option-text">CSS2</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="C" id="5127C">
                                                          <span class="symbol">C.</span>
                                                          <span class="option-text">CSS3</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="D" id="5127D">
                                                          <span class="symbol">D.</span>
                                                          <span class="option-text">CSS</span>
                                                          
                                                        </li> 
                                                        
                                                      </ul>
                                                    </div>
                                              
                                                    Correct Option: A</br>Explanation: <p>CSS1 was the first version of CSS<br>
It was officially released in 1996<br>
It introduced the ability to control layout and presentation of HTML and XHTML documents<br>
It offers features such as text formatting, color control, and layout control of a web page<br>
By using CSS1, It allowed web developers to separate the presentation of a web page from its structure and content<br>
This separation makes it easier to maintain and improve the design of a website.</p>                                                   
                                                  </div>
                                             </div>
                                        </div>
                                  </div>
                                                                     <div class="nacc">
                                         <div class="card mb-2">
                                              <div class="card-header">
                                                  <div class="gk-image">
                                                    <span style="color:#4e5050"><h6>Q: Which technique is employed to include a binding?</h6></span>
                                                    
                                                                                                      </div>
                                              </div>
                                              <div class="card-body">
                                                 <div class="main-content">
                                                    <div class="options">
                                                      <ul class="options-list">
                                                                                                                <li data-option="A" id="5179A">
                                                          <span class="symbol">A.</span>
                                                          <span class="option-text">binding()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="B" id="5179B">
                                                          <span class="symbol">B.</span>
                                                          <span class="option-text">add_bind()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="C" id="5179C">
                                                          <span class="symbol">C.</span>
                                                          <span class="option-text">bind()
</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="D" id="5179D">
                                                          <span class="symbol">D.</span>
                                                          <span class="option-text">addbind()</span>
                                                          
                                                        </li> 
                                                        
                                                      </ul>
                                                    </div>
                                              
                                                    Correct Option: C</br>Explanation: <p>The bind() method generates a new function whose this keyword is set to the supplied value when it is called. 
<br>
Any arguments that are passed in before the new function is called come first in the given sequence.</p>                                                   
                                                  </div>
                                             </div>
                                        </div>
                                  </div>
                                                                     <div class="nacc">
                                         <div class="card mb-2">
                                              <div class="card-header">
                                                  <div class="gk-image">
                                                    <span style="color:#4e5050"><h6>Q: What is the total number of node object properties?</h6></span>
                                                    
                                                                                                      </div>
                                              </div>
                                              <div class="card-body">
                                                 <div class="main-content">
                                                    <div class="options">
                                                      <ul class="options-list">
                                                                                                                <li data-option="A" id="5201A">
                                                          <span class="symbol">A.</span>
                                                          <span class="option-text">12</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="B" id="5201B">
                                                          <span class="symbol">B.</span>
                                                          <span class="option-text">14</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="C" id="5201C">
                                                          <span class="symbol">C.</span>
                                                          <span class="option-text">16</span>
                                                           
                                                        </li>                                                                                                                 <li data-option="D" id="5201D">
                                                          <span class="symbol">D.</span>
                                                          <span class="option-text">17</span>
                                                          
                                                        </li> 
                                                        
                                                      </ul>
                                                    </div>
                                              
                                                    Correct Option: C</br>Explanation: <p>The primary datatype for the entire Document Object Model is node interface. 
<br>
In the entire document tree, the node represents a single XML element. 
<br>
There are 16 node object properties in total.</p>                                                   
                                                  </div>
                                             </div>
                                        </div>
                                  </div>
                                                                 </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                              </div>
                            </div>
                          </div>
                      </div>
            
            </div>   
                      
                     
                      <div class="d-flex justify-content-center p-3 "> 
                          
                          <div class="container" id = "progress_bar" style = "display:none"> 
                              <div class="progress" style="height:50px">
                                <div class="progress-bar  bg-success" id = "percentage_div"> <span id="percentage_of_marks_progress"></span>  </div>
                              </div>  
                           <br>
                            <!--<button onclick="openFullscreen();" type="button" class="btn btn-secondary m-2" style="display:block" id="open_full_screen"> &#9974; Fullscreen</button>-->
                            <!--<button onclick="closeFullscreen();" type="button" class="btn btn-secondary m-2" style="display:none" id="close_full_screen"> &#10005; Close Fullscreen</button>-->
                             <div class="card bg-info text-white" style="display:none" id="result_modal"  data-toggle="modal" data-target="#exampleModalLong">
                                   <div class="card-body"> <i class="fa-solid fa-chart-simple"> </i>  View Analytics </div>  
                                 
                             </div>
                             <br>
                              <a href = "https://www.atnyla.com/quiz/104/347">
                                 <div class="card bg-primary text-white" style="display:none" id="another_test"> 
                                     <div class="card-body">Another Quiz</div>  
                                 </div>
                              </a>
                            
                            
                    </div>  
                          <button type="button" class="btn btn-primary m-2" style="display:block" id="prev">‹ Prev</button>
                          <button type="button" class="btn btn-primary m-2" style="display:block" id="next">Next ›</button>
                          <button type="button" class="btn btn-primary m-2" style="display:none" id="submit">Submit</button>
                      </div>
                     
                  </div>
                    <div class="col-lg-3">
                      
                        <div class="d-flex justify-content-center p-3 ">
                          <button onclick="openFullscreen();" type="button" class="btn btn-secondary m-2" style="display:block" id="open_full_screen"> &#9974; Fullscreen</button>
                          <button onclick="closeFullscreen();" type="button" class="btn btn-secondary m-2" style="display:none" id="close_full_screen"> &#10005; Close Fullscreen</button>
                          
                      </div>
                      
                
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<style>
         
 #myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: blue; /* Set a background color */
  background-color: transparent;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #00a7f5; /* Add a dark-grey background on hover */
}
</style>
     
<script>
// Get the button:
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script> 

<footer id="footer" style = "background: linear-gradient(to right, #1a2980, #26d0ce); margin-top: 10px;" class = "text-white p-3"> 
    <div class="footer-top">
      <div class="container-fluid">
        <div class="row"> 
          <div class="col-lg-2 col-md-6 footer-contact text-white"> 
          </div> 
          <div class="col-lg-3 col-md-6 footer-links text-white">
            <p style="font-size: 16px; color: white;">Useful Links</p>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/" class = "text-white">Home</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/" class = "text-white">About us</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/terms-and-conditions/" class = "text-white">Terms of service</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/guest-post" class = "text-white">Guest Post</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.atnyla.com/about/ads/" class = "text-white">Advertisement</a></li>
            </ul>
          </div> 
          <div class="col-lg-3 col-md-6 footer-links text-white">
            <p style="font-size: 16px; color: white;">Login</p>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">login</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">Sign Up</a></li> 
            </ul>
          </div> 
          <div class="col-lg-3 col-md-6 footer-newsletter">
            <p style="font-size: 16px; color: white;">Visit All Home</p>
            <ul>
            <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li>
            <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/java-programming-language" class = "text-white">Subject</a></li>
            <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/" class = "text-white">Library</a></li>
            <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li>
            <li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/blog/" class = "text-white">Blog</a></li>
            <!--<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>-->
            <!--<form action="" method="post">-->
            <!--  <input type="email" name="email"><input type="submit" value="Subscribe">-->
            <!--</form>-->
           </ul>
          </div> 
           <!--<div class="col-lg-2 col-md-6 footer-newsletter">-->
                <!-- <p style="font-size: 16px; color: white; ">Social Links</p>-->
                <!-- <ul> -->
                <!-- <li> <a href = "https://chat.whatsapp.com/BfdvA6k89H28bD4q4QqiaK" class="text-white">  Join Whatsapp Group  <i class="fa-brands fa-whatsapp"> </i> </a></li>-->
                <!--<li> <a href = "https://t.me/ComputerLanguageWithRumman" class="text-white">  Join Telegram Group  <i class="fa-brands fa-telegram"></i> </i> </a></li>-->
                <!--</ul>-->
            <!--</div>-->
        </div>
      </div>
    </div> 
    <div class="container d-md-flex   text-white"> 
      <div class="social-links text-center text-md-end pt-3 pt-md-0 text-white">
        <!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>-->
        <!--<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>-->
        <!--<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>-->
        <!--<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>-->
        <!--<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>-->
      </div>
    </div>
    
    <div class="me-md-auto text-center text-md-start">
        <div class="copyright text-center">
          © Copyright <strong><span>atnyla</span></strong>. All Rights Reserved
        </div>
        <div class="credits text-center"> 
          Designed by <a href="https://atnyla.com/"  style="color: white">atnyla.com</a>
        </div>
      </div> 
  </footer> 
    
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="https://atnyla.com/vendor/jquery/jquery.min.js"></script>

<script src="https://atnyla.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>  

<script src="https://atnyla.com/assets/js/isotope.min.js"></script>  

<!--<script src=" https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>  -->

<script src="https://atnyla.com/assets/js/owl-carousel.js"></script>
<!--<script src="https://atnyla.com/assets/js/lightbox.js"></script>-->
<script src="https://atnyla.com/assets/js/tabs.js"></script>

<!--<script src="https://atnyla.com/assets/js/video.js"></script>-->
<!--<script src="https://atnyla.com/assets/js/slick-slider.js"></script>--> 

<script src="https://atnyla.com/assets/js/custom.js"></script> 

<!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>-->

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> 
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> 
   
 
<script>
  //according to loftblog tut
  $(".nav li:first").addClass("active");

  var showSection = function showSection(section, isAnimate) {
    var direction = section.replace(/#/, ""),
      reqSection = $(".section").filter(
        '[data-section="' + direction + '"]'
      ),
      reqSectionPos = reqSection.offset().top - 0;

    if (isAnimate) {
      $("body, html").animate(
        {
          scrollTop: reqSectionPos,
        },
        800
      );
    } else {
      $("body, html").scrollTop(reqSectionPos);
    }
  };

  var checkSection = function checkSection() {
    $(".section").each(function () {
      var $this = $(this),
        topEdge = $this.offset().top - 80,
        bottomEdge = topEdge + $this.height(),
        wScroll = $(window).scrollTop();
      if (topEdge < wScroll && bottomEdge > wScroll) {
        var currentId = $this.data("section"),
          reqLink = $("a").filter("[href*=\\#" + currentId + "]");
        reqLink
          .closest("li")
          .addClass("active")
          .siblings()
          .removeClass("active");
      }
    });
  };

  $(".main-menu, .responsive-menu, .scroll-to-section").on(
    "click",
    "a",
    function (e) {
      e.preventDefault();
      showSection($(this).attr("href"), true);
    }
  );

  $(window).scroll(function () {
    checkSection();
  });
</script>
<script>
  $(document).ready(function () {
    $("#side-bar-toogle-btn").click(function () {
      $("#sidebar-list-group").toggle("slow");
    });
  });
</script> 
    
<script async src="https://fundingchoicesmessages.google.com/i/pub-7357847575760859?ers=1" nonce="P8qLHGFgH5IxNN3G6pLnUA"></script><script nonce="P8qLHGFgH5IxNN3G6pLnUA">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script>


<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
// prettyPrint();
</script>
  
</body>
</html>
 
 <script>
 
 var elem = document.documentElement;
 var hideElment = document.getElementById('hideDiv');
 var hideHeader = document.getElementById('NavHeaderDiv') ;
 var hideFooter = document.getElementById('footer') ;
 
 
function openFullscreen() {
   var elem = document.documentElement;
     
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
    hideElment.style.display = "none";
    hideHeader.style.display = "none";
    hideFooter.style.display = "none";
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
    elem.webkitRequestFullscreen();
  }  else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
  
  $("#open_full_screen").css("display", "none");
  $("#close_full_screen").css("display", "block");
}
 
 
 
 function next(){
    $(".show").each(function(){
       var id = $(this).attr("id");
       console.log(id);
   })
 }
 
 function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
    hideElment.style.display = "block";
    hideHeader.style.display = "block";
    hideFooter.style.display = "block";
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
  $("#close_full_screen").css("display", "none");
  $("#open_full_screen").css("display", "block");
}


$(document).ready(function () {
     var elem = document.documentElement;
     openFullscreen();
        
        var input = {};
        $(".options-list-item").click(function () {
          var qid = $(this).attr("data-qid");
          var selected_input = $(this).attr("data-option");
          if(qid){
               $("[data-qid="+qid+"]").css("backgroundColor", "white");
               $(this).css("backgroundColor", "#e3e8e5");
          }
              input[qid] = selected_input;
            //   console.log(JSON.stringify(input));
              if(Object.keys(input).length === 10){
                      $("#submit").css("display", "block");
             }
        });
        
        $("#submit").click(function () {
            $.ajax({
                type: "POST", 
                url: 'https://www.atnyla.com/library/general-knowledge/test-yourself/ajax/calculate_result.php',
                data: {user_id:9,assesment_id:69477, input:input},
                // dataType:"json",  
                success: function(data)
                {
                 $("#result_modal").css("display", "block");
                 $("#another_test").css("display", "block");
                 $("#progress_bar").css("display", "block");
                 $("#submit").css("display", "none");
                 $("#next").css("display", "none");
                 $("#prev").css("display", "none");
                 
                 var jsonData = JSON.parse(data); 
                   $('#quiz_row').css("display", "none");
                var percentage = (jsonData.acquired_points/10)*100;
                $('#no_of_questions').text('10');
                $('#no_of_correct_answer').text(jsonData.acquired_points);
                $('#no_of_wrong_answer').text(10 - jsonData.acquired_points);
                
                $("#result_in_top").css("display", "block");
                $('#no_of_correct_answer1').text(jsonData.acquired_points);
                $('#no_of_wrong_answer1').text(10 - jsonData.acquired_points);
                
                $('#percentage_of_marks').text(percentage);
                $('#percentage_of_marks_progress').text(percentage+"%");
                $('#percentage_div').css("width", percentage+"%");
                
                 $.each(jsonData.data, function(key,val) {
                     if(val.isCorrect == 'N'){
                         $('#'+key+val.selected_answer).css('color', '#f03c05');
                     }else{
                         $('#'+key+val.selected_answer).css('color', '#02db3c');
                     }         
                }); 
                //  $('result_modal').trigger('click');
                
                $('#exampleModalLong').modal();                       
                $('#exampleModalLong').modal({ keyboard: false });   
                $('#exampleModalLong').modal('show'); 
                }
           });
        });
        
        // $('#next').click(function(){
        //   $('#pills-tab > .nav-item > .active').parent().next('li').find('a').trigger('click');
        // });
        
$('#next').click(function() {
  var activeNavItem = $('.nav-pills .nav-link.active');
  var nextNavItem = activeNavItem.parent('.nav-item').next('.nav-item').find('.nav-link');

  if (nextNavItem.length > 0) {
    activeNavItem.removeClass('active');
    nextNavItem.addClass('active');
    var target = nextNavItem.attr('href');
    $('.tab-pane').removeClass('active show');
    $(target).addClass('active show');
  }
});

        
$('#prev').click(function() {
  var activeNavItem = $('.nav-pills .nav-link.active');
  var prevNavItem = activeNavItem.parent('.nav-item').prev('.nav-item').find('.nav-link');

  if (prevNavItem.length > 0) {
    activeNavItem.removeClass('active');
    prevNavItem.addClass('active');
    var target = prevNavItem.attr('href');
    $('.tab-pane').removeClass('active show');
    $(target).addClass('active show');
  }
});

        
        
        
       $(document).on('click', '.editQuestion', function(e){ 
         //alert('I am here'); 
         var postID1 = '137';
         $.ajax({
                type: "POST", 
                url: 'https://www.atnyla.com/library/general-knowledge/test-yourself/ajax/fetch.php',
                data: {sub_chapter_id:postID1, fetchdata:'fetchdata'},
                dataType:"json",  
                success: function(data)
                {   
                 var jsonData = JSON.parse(data); 
                 $('#loadDataHere').html(jsonData.message);
                
                }
           }); 
    });  
        
      });
 </script>
    
    <!-- Include jQuery library -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

<!-- Include Bootstrap JavaScript library -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->

<script>
    
    $(function() {

  $(".progress").each(function() {

    var value = $(this).attr('data-value');
    var left = $(this).find('.progress-left .progress-bar');
    var right = $(this).find('.progress-right .progress-bar');

    if (value > 0) {
      if (value <= 50) {
        right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
      } else {
        right.css('transform', 'rotate(180deg)')
        left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
      }
    }

  })

  function percentageToDegrees(percentage) {

    return percentage / 100 * 360

  }

});

</script>