JavaScript MCQ Javascript DOM & Event Handling MCQ

⚠ Report Question ✓ Question Verified

Q: What would the following JavaScript code produce?

<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= &nbsp;
                                </h1>
                                                          </div>
                              <div class="main-content" >
                                <div class="options">
                                  <ul class="options-list">
                                                                        <li class="options-list-item" data-qid="5135">
                                      <span class="symbol">A</span>
                                      <span class="option-text">True</span>
                                      <span class="correct-option check-span"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
                                      <span class="wrong-option check-span"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
                                    </li>                                                                         <li class="options-list-item" data-qid="5135">
                                      <span class="symbol">B</span>
                                      <span class="option-text">False</span>
                                      <span class="correct-option check-span"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
                                      <span class="wrong-option check-span"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
                                    </li>                                                                         <li class="options-list-item" data-qid="5135">
                                      <span class="symbol">C</span>
                                      <span class="option-text">Error</span>
                                       <span class="correct-option check-span"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
                                      <span class="wrong-option check-span"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
                                    </li>                                                                         <li class="options-list-item" data-qid="5135">
                                      <span class="symbol">D</span>
                                      <span class="option-text">Handling</span>
                                       <span class="correct-option check-span"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
                                      <span class="wrong-option check-span"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
                                    </li> 
                                    <li class="options-list-item text-center"> <a target="_blank" href="https://api.whatsapp.com/send?text= Hi, Check this post: https://www.atnyla.com/gk/104/347/5135" > <i class="fa-regular fa-share-from-square"></i> Share this MCQ  </a> </li>
                                     
                                  </ul> 
                                </div>
                                                                <span style="display: none" id="correct-option5135">B</span>
                                <div class="gk-answers" id="5135" style="display: none; ">
                                  <span style="padding-left: 0">Answer: </span>
                                  <span>B</span>
                                  <div class="gk-image">
                                    <br>
                                  </div>
                                  <p><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></p>
                                  
                                  
                                  <span style="padding: 10px 0">
                                    <a href="/general-knowledge/104/347">
                                      <i class="fa fa-share" aria-hidden="true"></i>
                                      Click me to Read more Question & Answer of 
                                      <img src="https://atnyla.com/assets/images/logo.png" class="rounded-circle" style="width:20px;height:20px; border: 1px solid #dfebe2;">
                                      <b> Javascript DOM & Event Handling MCQ</b>
                                    </a>
                                  </span>
                                      
                                  <hr> <a target="_blank" href="https://api.whatsapp.com/send?text= Hi, Check this post: https://www.atnyla.com/gk/104/347/5135" class="text-center"> <i class="fa-brands fa-whatsapp"> </i> Share this MCQ </a>  
                                 
                                </div>
                                
                                                           <div class="container pb-5 text-center"> 
                                                                         <a href="/gk/104/347/5134" class="btn-sm btn btn-primary">
                                            &#8249; Previous
                                        </a>
                                      
                                        <a href="/gk/104/347/5136" class="btn-sm  btn btn-primary">
                                            Next &#8250;
                                        </a> 
                               </div>
                       </div>
                         </div><br>
                          <div  class="row shadow p-3"  style="margin-bottom:10px;font-size:15px; border-radius: 20px; ">
                       <!-- Write your comment start section -->
                            <div id="accordion">
                                <div class="card">
                                  <div class="card-header">
                                    <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                      Write your comment
                                    </a>
                                  </div>
                                  <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                    <div class="card-body"> 
                                        <form class="form" role="form" method="post" name='comment insert' accept-charset="UTF-8" id="comment-insert" enctype="multipart/form-data">
                                             <div class="form-group">
                                              <label for="comment"><b></b>Login and</b> Write a Comment:</label>
                                              <textarea type="text" class="form-control bg-light" id="comment" placeholder="Enter comment" name="comment" required></textarea>
                                            </div> 
                                           	<input type="submit" name="ok_comment" class="btn btn-primary mt-3">
                                        </form>
                                    </div>
                                  </div>  
                              </div>
                            </div>
                        </div> <br>
                        
                        <!--facebook comments start-->
                     <div id="fb-root"></div>
                    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v18.0&appId=846709638827925&autoLogAppEvents=1" nonce="sLyPNhZO"></script>
                     <div class="fb-comments" data-href="https://www.atnyla.com/gk/" data-width="" data-numposts="5"></div>
                      <!--facebook comments end-->
                      
                          <div  class="row shadow p-3" style="margin-bottom:5px;font-size:15px; border-radius: 20px; "> 
                           <p> Learn More MCQ Questions from <a href="/general-knowledge/104/347"> 
                             <i class="fa-solid fa-share-from-square"> </i>  JavaScript MCQ <i class="fa fa-angle-double-right" aria-hidden="true"></i> Javascript DOM & Event Handling MCQ                             </a></p> 
                                                            <p>Practice your JavaScript Document Object Model (DOM) skills with this comprehensive multiple choice question (MCQ) quiz. Test your understanding of the DOM and its functions, and improve your ability to manipulate and interact with HTML and XML documents using JavaScript.</p>                               
                               
                          </div>  
                      </div>
                   
                   
                   
                    
                   
                   </div>
                 <div class="col-lg-3">
                    
                    <br>
                  
              </div>
                   
               </div>
               </div>
                     
                    <!-- Write your comment end section --> 
                                 </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>
<!-- The Modal -->
<div class="modal" id="ReportQuestionModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Report Question</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
         
        <div class="modal-body">
        <div id="messageDiv" class="alert alert-success" style = "display:none"> </div>
             <form method="POST" id = "myFormReport" class="needs-validation" novalidate>
              <div class="form-group">
                  <p>Hello, please login before you report any Quesion. &nbsp; <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModalLogin" id = "loginButton"> Login </button> </p><br>                  
                 
               
              <div class="form-group">
                <!--<label for="question">Write the issue/problem:</label>-->
                <textarea class="form-control" id="issueInQuestion" name="issueInQuestion" rows="5" required></textarea>
                <div class="invalid-feedback">
                  Please enter your question.
                </div>
              </div> 
              <button type="submit" id="submitBtn" class="btn btn-primary mt-2">Submit</button>
           </div>
            </form>
        
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        </div> 
    </div>
 </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
  
$(".options-list-item").click(function () {
  var qid = $(this).attr("data-qid");
  var selected_option = $(this).children("span:eq(0)").text();
  var correct_option = $("#correct-option" + qid).text();
    //  alert(correct_option);
  if (selected_option == correct_option) {
    $(this)
      .children(".correct-option")
      .css({
        color: "#05e841",
      })
      .show();
    $("#" + qid).show("slow");
    $("html, body").animate(
      {
        scrollTop: $("#" + qid).offset().top - 80,
      },
      1500
    );
    // $("#" + qid).focus();
  } else {
    $(this).children(".wrong-option").css("color", "red").show();
  }
});




 $(document).ready(function() {
   
 
$('#loginButton').on('click', function() {
    
  // Hide the ReportQuestionModal modal
  $('#ReportQuestionModal').modal('hide'); 
  $(".modal-backdrop").remove();

  // Show the myModalLogin modal
  $('#myModalLogin').modal('show');
  
});
     
  $('#submitBtn').click(function(e) {
    e.preventDefault();
    var userName = " ";
    var user_id_session = ""; 
    // alert(user_id_session);
    if(user_id_session == null || user_id_session == ""){
          // alert("Please Login");
          $("#ReportQuestionModal").modal("hide");
          $(".modal-backdrop").remove();
          $("#myModalLogin").modal('show'); 
            
    }else{
        var formData = $('#myFormReport').serialize() + '&functionID=report_question';
        var  question_id = 5135;
        formData = formData+"&question_id="+question_id;
        $.ajax({
          url: 'https://www.atnyla.com/dashboard-rumman/ajax/userGK.php',
          type: 'POST',
          data: formData,
          success: function(response) {
            var response = JSON.parse(response);
             if(response.status === 'success') {
                 // alert(response.message+"Your Report ID: "+response.issue_id);
                 text = response.message+"  Your Report ID: "+response.issue_id;
                 $("#messageDiv").text(text);
                 $("#messageDiv").show();
                 $("#myFormReport").hide();
                }
              if(response.status === 'failed') {
                   
             }
          },
          error: function() {
            alert('Error submitting form. Please try again later.');
          }
        }); 
    }
    
   
  });
});

  
   
  
  

});
</script>
<style>
 
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.fa-circle-question {
  animation: blink 1.5s infinite;
  color:yellow;
}
 
.comment{
    margin-top: 5%;
    margin-left: 20px;
}


.comment{
    border: 1px solid rgba(16, 46, 46, 1);
    background-color: rgba(16, 46, 46, 0.973);
    float: left;
    border-radius: 5px;
    padding-left: 40px;
    padding-right: 30px;
    padding-top: 10px;
    
}
.comment h4,.comment span,.darker h4,.darker span{
    display: inline;
}

.comment p,.comment span,.darker p,.darker span{
    color: rgb(184, 183, 183);
}

 </style>