Login and Register ×
Check your Email for the OTP
function showcommentform() { var data=</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5086" data-option="A"><span class="symbol">A</span><span class="option-text">Comment </span></li><li class="options-list-item" data-qid="5086" data-option="B"><span class="symbol">B</span><span class="option-text">new text </span></li><li class="options-list-item" data-qid="5086" data-option="C"><span class="symbol">C</span><span class="option-text">Error</span></li><li class="options-list-item" data-qid="5086" data-option="D"><span class="symbol">D</span><span class="option-text">Undefined</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q2" role="tabpane2"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5107"><h4> Which of the following objects has ownership of the navigator property?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5107" data-option="A"><span class="symbol">A</span><span class="option-text">Document </span></li><li class="options-list-item" data-qid="5107" data-option="B"><span class="symbol">B</span><span class="option-text">Window </span></li><li class="options-list-item" data-qid="5107" data-option="C"><span class="symbol">C</span><span class="option-text">Navigator </span></li><li class="options-list-item" data-qid="5107" data-option="D"><span class="symbol">D</span><span class="option-text">Location</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q3" role="tabpane3"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5110"><h4> Which of the following attributes can be utilised for browser sniffing?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5110" data-option="A"><span class="symbol">A</span><span class="option-text">platform </span></li><li class="options-list-item" data-qid="5110" data-option="B"><span class="symbol">B</span><span class="option-text">appVersion </span></li><li class="options-list-item" data-qid="5110" data-option="C"><span class="symbol">C</span><span class="option-text">both platform and appVersion </span></li><li class="options-list-item" data-qid="5110" data-option="D"><span class="symbol">D</span><span class="option-text">appName</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q4" role="tabpane4"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5119"><h4> Which window object's property contains the name of the frame?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5119" data-option="A"><span class="symbol">A</span><span class="option-text">name </span></li><li class="options-list-item" data-qid="5119" data-option="B"><span class="symbol">B</span><span class="option-text">title </span></li><li class="options-list-item" data-qid="5119" data-option="C"><span class="symbol">C</span><span class="option-text">description </span></li><li class="options-list-item" data-qid="5119" data-option="D"><span class="symbol">D</span><span class="option-text">style</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q5" role="tabpane5"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5122"><h4> Which syntax does CSS employ to describe its elements?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5122" data-option="A"><span class="symbol">A</span><span class="option-text">Protectors </span></li><li class="options-list-item" data-qid="5122" data-option="B"><span class="symbol">B</span><span class="option-text">Selectors </span></li><li class="options-list-item" data-qid="5122" data-option="C"><span class="symbol">C</span><span class="option-text">Both Protectors and Selectors </span></li><li class="options-list-item" data-qid="5122" data-option="D"><span class="symbol">D</span><span class="option-text">Protectors or Selectors</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q6" role="tabpane6"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5166"><h4> Which of the following properties describes the entered text string?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5166" data-option="A"><span class="symbol">A</span><span class="option-text">message </span></li><li class="options-list-item" data-qid="5166" data-option="B"><span class="symbol">B</span><span class="option-text">data </span></li><li class="options-list-item" data-qid="5166" data-option="C"><span class="symbol">C</span><span class="option-text">string </span></li><li class="options-list-item" data-qid="5166" data-option="D"><span class="symbol">D</span><span class="option-text">text</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q7" role="tabpane7"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5188"><h4> What does the method getUserData(key) accomplish?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5188" data-option="A"><span class="symbol">A</span><span class="option-text">Returns the associated object </span></li><li class="options-list-item" data-qid="5188" data-option="B"><span class="symbol">B</span><span class="option-text">Gets the user data </span></li><li class="options-list-item" data-qid="5188" data-option="C"><span class="symbol">C</span><span class="option-text">Returns the user data </span></li><li class="options-list-item" data-qid="5188" data-option="D"><span class="symbol">D</span><span class="option-text">Gets the user key</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q8" role="tabpane8"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5199"><h4> How many named nodetype constants are there?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5199" data-option="A"><span class="symbol">A</span><span class="option-text">13</span></li><li class="options-list-item" data-qid="5199" data-option="B"><span class="symbol">B</span><span class="option-text">10</span></li><li class="options-list-item" data-qid="5199" data-option="C"><span class="symbol">C</span><span class="option-text">12</span></li><li class="options-list-item" data-qid="5199" data-option="D"><span class="symbol">D</span><span class="option-text">15</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q9" role="tabpane9"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5200"><h4> Which of the following Node types has a null node value?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5200" data-option="A"><span class="symbol">A</span><span class="option-text">Document</span></li><li class="options-list-item" data-qid="5200" data-option="B"><span class="symbol">B</span><span class="option-text">DocumentFragment</span></li><li class="options-list-item" data-qid="5200" data-option="C"><span class="symbol">C</span><span class="option-text">DocumentType</span></li><li class="options-list-item" data-qid="5200" data-option="D"><span class="symbol">D</span><span class="option-text">All of the mentioned</span></li></ul></div></div></div></div></div></div><div class="tab-pane fade " id="q10" role="tabpane10"><div class="nacc"><div class="card mb-2"><div class="card-header"><div class="gk-image"><a style="color:#4e5050" href="#/question/mcq/5208"><h4> How do you configure a Cookie visibility scope for localStorage?</h4></a></div></div><div class="card-body"><div class="main-content"><div class="options"><ul class="options-list"><li class="options-list-item" data-qid="5208" data-option="A"><span class="symbol">A</span><span class="option-text">/</span></li><li class="options-list-item" data-qid="5208" data-option="B"><span class="symbol">B</span><span class="option-text">//</span></li><li class="options-list-item" data-qid="5208" data-option="C"><span class="symbol">C</span><span class="option-text">%</span></li><li class="options-list-item" data-qid="5208" data-option="D"><span class="symbol">D</span><span class="option-text">*</span></li></ul></div></div></div></div></div></div></div> <div class="container mt-4" id="result_in_top" style="display:none;"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="bg-light p-3 rounded text-center"> <strong>Results:</strong> <br> <span class="text-success">🟢 Correct Answers: <span id="no_of_correct_answer1"></span></span> <span class="text-danger">🔴 Wrong Answers: <span id="no_of_wrong_answer1"></span></span> </div> </div> </div> </div> <div class="d-flex justify-content-center p-3 "> <div class="container my-4" id="progress_bar" style="display: none;"> <!-- Progress Bar --> <div class="progress" style="height: 40px; border-radius: 25px;"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated text-center font-weight-bold" id="percentage_div" role="progressbar" style="width: 0%; border-radius: 25px;"> <span id="percentage_of_marks_progress"></span> </div> </div> <br> <!-- Result Details Button --> <div class="card shadow-sm bg-info text-white mt-3 cursor-pointer" id="result_modal" style="display: none;" data-toggle="modal" data-target="#exampleModalLong"> <div class="card-body d-flex align-items-center"> <i class="fas fa-chart-bar fa-lg mr-3 fa-pulse"></i> <strong class="text-white">💹 View Detailed Quiz Results</strong> </div> </div> <br> <!-- Another Quiz Button --> <a href="https://www.rummanansari.com/quiz/subchapter/347" class="text-decoration-none"> <div class="card shadow-sm bg-primary text-white mt-2" id="another_test" style="display: none;"> <div class="card-body text-center font-weight-bold"> 🛫 Take Another Quiz </div> </div> </a> </div> <button type="button" class="btn btn-success m-2" style="display:block" id="prev">◀ Prev</button> <button type="button" class="btn btn-success m-2" style="display:block" id="next">Next ▶</button> <button type="button" class="btn btn-success m-2" style="display:none" id="submit"><b>✓</b> Submit</button> </div> <!--</div>--> </div> <div class="col-md-3"> <div class="alert alert-secondary" role="alert">Login to save results<div id="timer_container"></div><script> var timerDuration = 6; var timerInterval; var submittedBeforeTimeEnd = false; document.addEventListener("DOMContentLoaded", function() { startTimer(); }); function startTimer() { var timerDuration = 300; var timerInterval; var submittedBeforeTimeEnd = false; function updateTimerDisplay() { var timerContainer = document.getElementById("timer_container"); if (!timerContainer) { clearInterval(timerInterval); return; } var minutes = Math.floor(timerDuration / 60); var seconds = timerDuration % 60; var timePrefix = "Time Left: "; if (submittedBeforeTimeEnd) { timePrefix = "Submitted Before Time End: "; } var formattedTime = pad(minutes) + ":" + pad(seconds); timerContainer.innerHTML = timePrefix + formattedTime; timerDuration--; if (timerDuration < 0) { clearInterval(timerInterval); if (!submittedBeforeTimeEnd) { timerContainer.innerHTML = "Submitted After Time End!"; } var submitButton = document.getElementById("submit"); if (submitButton) { submitButton.style.display = "block"; } submitButton.click(); } } function pad(number) { return (number < 10 ? "0" : "") + number; } updateTimerDisplay(); timerInterval = setInterval(updateTimerDisplay, 1000); var submitButton = document.getElementById("submit"); if (submitButton) { submitButton.addEventListener("click", function () { clearInterval(timerInterval); submittedBeforeTimeEnd = timerDuration >= 0; // Clear the content of the timer_container var timerContainer = document.getElementById("timer_container"); if (timerContainer) { timerContainer.innerHTML = "Quiz Submitted"; } }); } } </script> </div> <div class="alert alert-secondary" role="alert"> <details> <summary>Quiz Information</summary> <!-- Button trigger modal --> <button type="button" class="btn btn-sm btn-outline-success" data-toggle="modal" data-target="#exampleModal"> Launch </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Quiz Information</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id=""> <div class="card"><div class="card-header bg-white text-white"><h2 class="mb-0 text-primary">Quiz Platform FAQ</h2></div><div class="card-body"><h3>General Information</h3><ul class="list-group"><li class="list-group-item"><strong>Number of Questions:</strong> Each quiz consists of <strong>10 questions</strong>.</li><li class="list-group-item"><strong>Time Limit:</strong> You have <strong>30 seconds per question</strong>. The total time to complete the quiz is <strong>5 minutes</strong>.</li><li class="list-group-item"><strong>Multiple Attempts:</strong> You can take the quiz <strong>multiple times</strong> to improve your score.</li></ul><h3>Results and Feedback</h3><ul class="list-group"><li class="list-group-item"><strong>Result Analysis:</strong> After completing the quiz, you will see a <strong>results page</strong> with the following details: <ul class="list-group mt-2"> <li class="list-group-item"><strong>Correct Option</strong> for each question.</li> <li class="list-group-item"><strong>Your Selected Option</strong> for each question.</li> <li class="list-group-item"><strong>Explanation</strong> for each answer to help you understand why it is correct or incorrect.</li> <li class="list-group-item"><strong>Percentage of Correct Answers</strong> to show your overall performance.</li> </ul> </li><li class="list-group-item"><strong>Interactive Features:</strong> The platform provides feedback on each attempt to help you learn and improve.</li></ul><h3>Important Instructions</h3><ul class="list-group"><li class="list-group-item"><strong>Do Not Refresh:</strong> <strong>Do not refresh the page</strong> while taking the quiz. Refreshing the page will end the current quiz and a new quiz will start.</li><li class="list-group-item"><strong>Saving Your Quiz:</strong> To save your quiz progress and questions, <strong>log in</strong> to your account. Once logged in, you can <strong>view saved quizzes</strong> in your profile section.</li><li class="list-group-item"><strong>Mandatory Selection:</strong> All questions are <strong>mandatory to select</strong>. If you do not select all 10 questions, you will not be able to submit the quiz. Once all questions are selected, you will be able to see the <strong>Submit</strong> button. If you wait until the end of the time, the quiz will be <strong>auto-submitted</strong> by the system, and you will be able to see your results.</li></ul><h3>Tips for Taking the Quiz</h3><ul class="list-group mt-2"><li class="list-group-item"><strong>Manage Your Time:</strong> Keep track of the time for each question to ensure you have enough time to answer all 10 questions.</li><li class="list-group-item"><strong>Review Explanations:</strong> After the quiz, read the explanations provided for each answer to enhance your understanding of the material.</li><li class="list-group-item"><strong>Retake the Quiz:</strong> If desired, take the quiz again to improve your score and reinforce your learning.</li><li class="list-group-item"><strong>Avoid Refreshing:</strong> To prevent losing progress, avoid refreshing the page during the quiz.</li><li class="list-group-item"><strong>Log In to Save:</strong> If you want to save your quiz progress, log in to your account and check your profile section for saved quizzes.</li></ul></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> </details> </div> <div class="alert alert-secondary" role="alert"> <div class="d-flex justify-content-center p-3"> <button onclick="toggleFullscreen();" type="button" class="btn btn-secondary m-2" style="display:block" id="open_full_screen">⛶ Fullscreen</button> <button onclick="toggleFullscreen();" type="button" class="btn btn-secondary m-2" style="display:none" id="close_full_screen">✕ Close Fullscreen</button> </div> <div class="d-flex justify-content-center p-3"> <button type="button" class="btn btn-success" onclick="window.open('https://api.whatsapp.com/send?text=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. https://www.rummanansari.com/quiz/subchapter/347', '_blank')"> <i class="fa-brands fa-whatsapp"></i> Share </button> </div> </div> </div> </div> <!-- Second Row --> <div class="row"> <div class="col-md-9" > </div> <div class="col-md-3"> </div> </div> </div> <div style="" class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog modal-lg modal-fullscreen" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Quiz Analytics</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id="modal-body"> <div class=" d-flex align-items-center justify-content-center"> <div class="pl-2 mb-3"> <h2 id="QuizName">Javascript DOM & Event Handling MCQ - Quiz </h2> Guest User <img class="img-responsive thumbnail" alt="clock" title="clock" src="/library/images-tutorials/tutorial-458413727-clock.png" style="height:20px;width:20px"> Time Taken: <span id="time_taken"></span> <hr> <span class="badge bg-secondary p-2 m-2">Questions: <span id="no_of_questions" style="font-size:20px"></span></span> <span class="badge bg-success p-2 m-2">Answered: <span id="SelectedQuestions" style="font-size:20px"></span></span> <span class="badge bg-danger p-2 m-2">Not Answered: <span id="NotSelectedQuestions" style="font-size:20px"></span></span> <hr> <span class="badge bg-success p-2 m-2"><img class="img-responsive thumbnail" alt="right" title="right" src="/library/images-tutorials/tutorial-843357856-right.png" style="height:50px;width:50px">Correct Answer: <span id="no_of_correct_answer" style="font-size:20px"></span></span> <span class="badge bg-danger p-2 m-2"><img class="img-responsive thumbnail" alt="wrong" title="wrong" src="/library/images-tutorials/tutorial-854701377-wrong.png" style="height:50px;width:50px">Wrong Answer: <span id="no_of_wrong_answer" style="font-size:20px"></span></span> <span class="badge bg-primary p-2 m-2"><img class="img-responsive thumbnail" alt="percentage small" title="percentage small" src="/library/images-tutorials/tutorial-878681822-percentage-sm.png" style="height:50px;width:50px">Percentage: <span id="percentage_of_marks" style="font-size:20px"></span>%</span> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5086"><p>Q: What would the following JavaScript code produce? <pre class = "prettyprint"><xmp> function showcommentform() { var data=</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5086A"> <span class="symbol">A.</span> <span class="option-text">Comment </span> </li> <li data-option="B" id="5086B"> <span class="symbol">B.</span> <span class="option-text">new text </span> </li> <li data-option="C" id="5086C"> <span class="symbol">C.</span> <span class="option-text">Error</span> </li> <li data-option="D" id="5086D"> <span class="symbol">D.</span> <span class="option-text">Undefined</span> </li> </ul> </div> Correct Option: A<br><b>Remarks: </b><p id='Q5086' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>The dynamic html can be written on the html document using the innerHTML attribute. <br>The majority of the time, it is used in web sites to create dynamic html for things like comment forms, links, and registration forms.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5107"><p>Q: Which of the following objects has ownership of the navigator property?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5107A"> <span class="symbol">A.</span> <span class="option-text">Document </span> </li> <li data-option="B" id="5107B"> <span class="symbol">B.</span> <span class="option-text">Window </span> </li> <li data-option="C" id="5107C"> <span class="symbol">C.</span> <span class="option-text">Navigator </span> </li> <li data-option="D" id="5107D"> <span class="symbol">D.</span> <span class="option-text">Location</span> </li> </ul> </div> Correct Option: C<br><b>Remarks: </b><p id='Q5107' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>A Window object's navigator attribute relates to a Navigator object that has information about the vendor and version number of the browser. <br> The properties of the Navigator object include appCodeName, appVersion, appName, etc.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5110"><p>Q: Which of the following attributes can be utilised for browser sniffing?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5110A"> <span class="symbol">A.</span> <span class="option-text">platform </span> </li> <li data-option="B" id="5110B"> <span class="symbol">B.</span> <span class="option-text">appVersion </span> </li> <li data-option="C" id="5110C"> <span class="symbol">C.</span> <span class="option-text">both platform and appVersion </span> </li> <li data-option="D" id="5110D"> <span class="symbol">D.</span> <span class="option-text">appName</span> </li> </ul> </div> Correct Option: C<br><b>Remarks: </b><p id='Q5110' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>The navigator object properties contain information about the platform and appVersion.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5119"><p>Q: Which window object's property contains the name of the frame?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5119A"> <span class="symbol">A.</span> <span class="option-text">name </span> </li> <li data-option="B" id="5119B"> <span class="symbol">B.</span> <span class="option-text">title </span> </li> <li data-option="C" id="5119C"> <span class="symbol">C.</span> <span class="option-text">description </span> </li> <li data-option="D" id="5119D"> <span class="symbol">D.</span> <span class="option-text">style</span> </li> </ul> </div> Correct Option: A<br><b>Remarks: </b><p id='Q5119' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>The name property of a Window object holds the name of the frame if it has one<br> This property is writable, and scripts can set it as desired<br> An iframe creates a nested browsing context represented by a Window object of its own.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5122"><p>Q: Which syntax does CSS employ to describe its elements?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5122A"> <span class="symbol">A.</span> <span class="option-text">Protectors </span> </li> <li data-option="B" id="5122B"> <span class="symbol">B.</span> <span class="option-text">Selectors </span> </li> <li data-option="C" id="5122C"> <span class="symbol">C.</span> <span class="option-text">Both Protectors and Selectors </span> </li> <li data-option="D" id="5122D"> <span class="symbol">D.</span> <span class="option-text">Protectors or Selectors</span> </li> </ul> </div> Correct Option: B<br><b>Remarks: </b><p id='Q5122' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>CSS stylesheets have a powerful syntax, known as selectors, for describing elements or sets of elements within a document.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5166"><p>Q: Which of the following properties describes the entered text string?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5166A"> <span class="symbol">A.</span> <span class="option-text">message </span> </li> <li data-option="B" id="5166B"> <span class="symbol">B.</span> <span class="option-text">data </span> </li> <li data-option="C" id="5166C"> <span class="symbol">C.</span> <span class="option-text">string </span> </li> <li data-option="D" id="5166D"> <span class="symbol">D.</span> <span class="option-text">text</span> </li> </ul> </div> Correct Option: B<br><b>Remarks: </b><p id='Q5166' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>The text string that was typed is specified in the data attribute of a textinput event handler. <br> The user-entertained data is manipulated using this data characteristic.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5188"><p>Q: What does the method getUserData(key) accomplish?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5188A"> <span class="symbol">A.</span> <span class="option-text">Returns the associated object </span> </li> <li data-option="B" id="5188B"> <span class="symbol">B.</span> <span class="option-text">Gets the user data </span> </li> <li data-option="C" id="5188C"> <span class="symbol">C.</span> <span class="option-text">Returns the user data </span> </li> <li data-option="D" id="5188D"> <span class="symbol">D.</span> <span class="option-text">Gets the user key</span> </li> </ul> </div> Correct Option: A<br><b>Remarks: </b><p id='Q5188' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>The object connected to a key on this node is returned by the function getUserData(key). <br> Calling setUserData with the same key must have been made before setting the object to this node.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5199"><p>Q: How many named nodetype constants are there?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5199A"> <span class="symbol">A.</span> <span class="option-text">13</span> </li> <li data-option="B" id="5199B"> <span class="symbol">B.</span> <span class="option-text">10</span> </li> <li data-option="C" id="5199C"> <span class="symbol">C.</span> <span class="option-text">12</span> </li> <li data-option="D" id="5199D"> <span class="symbol">D.</span> <span class="option-text">15</span> </li> </ul> </div> Correct Option: C<br><b>Remarks: </b><p id='Q5199' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>DOM nodes can be of different types, such as element nodes and text nodes, and each node has a nodeType property that indicates what type it is. <br> There are a total of 12 nodetype - named constants.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5200"><p>Q: Which of the following Node types has a null node value?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5200A"> <span class="symbol">A.</span> <span class="option-text">Document</span> </li> <li data-option="B" id="5200B"> <span class="symbol">B.</span> <span class="option-text">DocumentFragment</span> </li> <li data-option="C" id="5200C"> <span class="symbol">C.</span> <span class="option-text">DocumentType</span> </li> <li data-option="D" id="5200D"> <span class="symbol">D.</span> <span class="option-text">All of the mentioned</span> </li> </ul> </div> Correct Option: D<br><b>Remarks: </b><p id='Q5200' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>All three node types, Document, DocumentFragment, and DocumentType, have a node value of null. <br> The nodeType property will return 1 if the node is an element node. <br> The nodeType property will return 2 if the node is an attribute node.</p></div> </div> </div> <div class="nacc"> <div class="card mb-2"> <div class="card-header"> <div class="gk-image"> <span style="color:#4e5050"><h6><a href="/question/mcq/5208"><p>Q: How do you configure a Cookie visibility scope for localStorage?</p></a></h6></span> </div> </div> <div class="card-body"> <div class="main-content"> <div class="options"> <ul class="options-list"> <li data-option="A" id="5208A"> <span class="symbol">A.</span> <span class="option-text">/</span> </li> <li data-option="B" id="5208B"> <span class="symbol">B.</span> <span class="option-text">//</span> </li> <li data-option="C" id="5208C"> <span class="symbol">C.</span> <span class="option-text">%</span> </li> <li data-option="D" id="5208D"> <span class="symbol">D.</span> <span class="option-text">*</span> </li> </ul> </div> Correct Option: A<br><b>Remarks: </b><p id='Q5208' > </p> </div> </div> <div class='card-footer'><u> <b>Explanation: </b></u><p>Setting a cookie's path to "/" enables scoping similar to localStorage while also requiring the browser to send the cookie name and value to the server whenever it requests any web page on the site.</p></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> </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, #638766, #BDD6AE); 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-2 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.rummanansari.com/" class = "text-white">Home</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansarirummanansari.com/about/" class = "text-white">About us</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/terms-and-conditions/" class = "text-white">Terms of service</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.com/about/guest-post" class = "text-white">Guest Post</a></li> <li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.rummanansari.com/about/ads/" class = "text-white">Advertisement</a></li> </ul> </div> <div class="col-lg-2 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.rummanansarirummanansarirummanansari.com/user/" class = "text-white">login</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/user/" class = "text-white">Sign Up</a></li> </ul> </div> <div class="col-lg-2 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.rummanansari.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.com/library/java-programming-language" class = "text-white">Subject</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansarirummanansari.com/library/" class = "text-white">Library</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansarirummanansari.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li> <li><i class="bx bx-chevron-right"></i> <a href="https://www.rummanansari.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>rummanansari</span></strong>. All Rights Reserved </div> <div class="credits text-center"> Designed by <a href="https://rummanansari.com/" style="color: white">rummanansari.com</a> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Bootstrap core JavaScript --> <script src="https://rummanansari.com/vendor/jquery/jquery.min.js"></script> <script src="https://rummanansari.com/vendor/bootstrap/js/bootstrap.min.js"></script> <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>--> <!--<script src="https://rummanansari.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> --> <script src="https://rummanansari.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://rummanansari.com/assets/js/owl-carousel.js"></script> <!--<script src="https://rummanansari.com/assets/js/lightbox.js"></script>--> <script src="https://rummanansari.com/assets/js/tabs.js"></script> <!--<script src="https://rummanansari.com/assets/js/video.js"></script>--> <script src="https://rummanansari.com/assets/js/slick-slider.js"></script> <script src="https://rummanansari.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://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></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> <!--it will work as well but its shows menus --> <!-- USING A CDN glightbox start --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script> <script> const lightbox = GLightbox({ touchNavigation: true, loop: true, autoplayVideos: true });</script> <!-- USING A CDN glightbox end --> <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> </body> </html> <style> .custom-background { width: 400px; /* Fixed width */ height: 400px; /* Fixed height */ background-image: url('/library/images-tutorials/Image-783251003-Loginpage.png'); background-size: contain; /* Ensure the entire image is visible */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Prevent repeating */ padding: 10px; border-radius: 8px; /* Optional: Rounded corners */ position: relative; /* For child element positioning */ overflow: hidden; /* Ensure pseudo-element does not spill out */ } .custom-background .list-group-item { background-color: rgba(99, 135, 102, 0.6); /* Green with transparency */ color: white; /* Text color */ border: none; position: absolute; /* Positioning it absolutely within the parent */ top: 50%; /* Center vertically */ left: 50%; /* Center horizontally */ transform: translate(-70%, -70%); /* Adjust positioning to be perfectly centered */ z-index: 1; /* Ensure it stays above the background */ padding: 10px 20px; /* Optional: Adjust padding */ } .custom-background .list-group-item.active { background-color: rgba(0, 123, 255, 0.95); /* Slightly less transparent blue for active item */ color: #fff; border: none; } .custom-background::before { content: ''; /* Empty content for overlay */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); /* Adjust this value to control visibility */ z-index: 0; /* Keeps it below the list items */ } </style> <style> .warning-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); /* Light background with slight opacity */ color: #000; /* Black text color for readability */ justify-content: center; align-items: center; } .modal-content-custom { background: #f8f9fa; /* Light gray background for the modal content */ padding: 20px; border-radius: 5px; /*text-align: center;*/ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */ } .modal-content-custom button { margin-top: 10px; padding: 10px 20px; border: none; background: #007bff; /* Blue background for the button */ color: #fff; /* White text color for the button */ cursor: pointer; border-radius: 5px; /* Rounded corners for the button */ } .modal-content-custom button:hover { background: #0056b3; /* Darker blue on hover for the button */ } </style> <!-- Your content here --> <!-- Warning Modal --> <div id="warningModal" class="warning-modal"> <div class="modal-content-custom"> <p>You have unsaved changes or are in the middle of a quiz. If you leave, your progress might be lost. Select option for all questions.</p> <button onclick="closeModal()">Okay</button> </div> </div> <script> let isQuizActive = true; // Flag to track if the quiz is active // Function to show the in-app warning modal function showInAppWarning() { if (isQuizActive) { document.getElementById('warningModal').style.display = 'flex'; } } // Function to close the warning modal function closeModal() { document.getElementById('warningModal').style.display = 'none'; } // Event listener for beforeunload event window.addEventListener('beforeunload', function (e) { if (isQuizActive) { showInAppWarning(); e.preventDefault(); // Prevent default behavior return ''; // Return empty string to trigger the dialog (browser dependent) } }); // Example function to simulate quiz completion or data save function completeQuiz() { isQuizActive = false; } </script> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> var input = {}; var elem = document.documentElement; var hideElment = document.getElementById('hideDiv'); var hideHeader = document.getElementById('NavHeaderDiv'); var hideFooter = document.getElementById('footer'); // intentionally global not inside ready function toggleFullscreen() { var elem = document.documentElement; if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // Enter fullscreen if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } hideElements(true); // Hide elements in fullscreen mode } else { // Exit fullscreen if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } hideElements(false); // Show elements after exiting fullscreen } } // intentionally global not inside ready function hideElements(hide) { // Assuming hideElment, hideHeader, and hideFooter are defined elsewhere in your code // If not, you should define these elements before using them var hideElment = document.getElementById('hideDiv'); var hideHeader = document.getElementById('NavHeaderDiv'); var hideFooter = document.getElementById('footer'); // alert(hideHeader); if (hide) { $("#hideDiv").css("display", "none"); $("#NavHeaderDiv").css("display", "none"); $("#footer").css("display", "none"); hideElment.style.display = "none"; hideHeader.style.display = "none"; hideFooter.style.display = "none"; } else { $("#hideDiv").css("display", "block"); $("#NavHeaderDiv").css("display", "block"); $("#footer").css("display", "block"); hideElment.style.display = "block"; hideHeader.style.display = "block"; hideFooter.style.display = "block"; } // Toggle display of the fullscreen buttons $("#open_full_screen").toggle(); $("#close_full_screen").toggle(); } function saveAsPDF() { // Get the element by its ID const quizNameElement = document.getElementById("QuizName"); // Check if the element is found let quizNameInnerHTML = ''; // Initialize to an empty string by default if (quizNameElement) { // Get the inner HTML content of the element quizNameInnerHTML = quizNameElement.innerHTML; } // Specify the element you want to save as PDF const element = document.querySelector('#modal-body'); // Configuration for html2pdf const opt = { margin: 0, filename: `RummanAnsari-${quizNameInnerHTML}.pdf`, // Use template literals image: { type: 'jpeg', quality: 0.45 }, html2canvas: { scale: 6 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; // Call html2pdf function with the specified element and options html2pdf(element, opt); } $(document).ready(function () { var input = {}; $('#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'); } }); $('.options-list-item').on('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"); } }); $(document).on('click', '#submit', function() { $.ajax({ type: "POST", url: 'https://www.rummanansari.com/library/general-knowledge/test-yourself/ajax/calculate_result.php', data: { user_id: "9", assesment_id: "9479", quiz_attempt_count: "", 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"); $('#quiz_row').hide(); $('#pills-tabContent').hide(); var jsonData = JSON.parse(data); // $('#quiz_row').css("display", "none"); var percentage = (jsonData.acquired_points/jsonData.no_of_question_in_quiz)*100; $('#no_of_questions').text(jsonData.no_of_question_in_quiz); $('#no_of_correct_answer').text(jsonData.acquired_points); $('#no_of_wrong_answer').text(jsonData.no_of_question_in_quiz - jsonData.acquired_points); $("#result_in_top").css("display", "block"); $('#no_of_correct_answer1').text(jsonData.acquired_points); $('#no_of_wrong_answer1').text(jsonData.no_of_question_in_quiz - jsonData.acquired_points); var timeDifferenceText = ''; if (jsonData.calculatedTimeDifference.hours) { timeDifferenceText += jsonData.calculatedTimeDifference.hours + ' hours'; } if (jsonData.calculatedTimeDifference.minutes) { timeDifferenceText += jsonData.calculatedTimeDifference.minutes + ' minutes'; } if (jsonData.calculatedTimeDifference.seconds) { timeDifferenceText += jsonData.calculatedTimeDifference.seconds + ' seconds.'; } $('#time_taken').text(timeDifferenceText); $('#SelectedQuestions').text(jsonData.SelectedQuestions); $('#NotSelectedQuestions').text(jsonData.no_of_question_in_quiz - jsonData.SelectedQuestions); $('#percentage_of_marks').text(percentage.toFixed(2)); $('#percentage_of_marks_progress').text(percentage.toFixed(2)+"%"); $('#percentage_div').css("width", percentage.toFixed(2)+"%"); // alert(jsonData.data); $.each(jsonData.data, function(key, val) { var paragraph = document.getElementById('Q' + key); if (val.selected_by_user == 'N') { paragraph.innerText = "You haven't selected any options."; $('#Q' + key).css('color', '#ffc107'); } else { $('#Q' + key).text("You have selected the option " + val.selected_answer+"."); $('#Q' + key).css('color', '#ffc107'); } if (val.isCorrect == 'N') { // Incorrect answer $('#' + key + val.selected_answer).css('color', '#f03c05'); paragraph.innerHTML += " <b> Which is wrong option.</b>"; } else if(val.isCorrect == 'Y'){ // Correct answer $('#' + key + val.selected_answer).css('color', '#02db3c'); paragraph.innerHTML += " <b> Which is correct option.</b>"; } }); // $('result_modal').trigger('click'); $('#exampleModalLong').modal(); $('#exampleModalLong').modal({ keyboard: false }); $('#exampleModalLong').modal('show'); // Manually close the modal with a delay setTimeout(function() { $('#exampleModalLong').modal('hide'); }, 10000); // Adjust the delay as needed } }); }); 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).on('click', '.editQuestion', function(e){ //alert('I am here'); var postID1 = '137'; $.ajax({ type: "POST", url: 'https://www.rummanansari.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); } }); }); $(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 } }); }); fetch('https://www.rummanansari.com/app/controllers/SubjectController.php?sid=28', { method: 'POST', headers: { 'Content-Type': 'application/json', // Add other headers as needed }, body: JSON.stringify({ subject_id: 12 }) // Replace 12 with actual subject_id }) .then(response => response.json()) .then(data => { // Handle response data here console.log(data); }) .catch(error => { console.error('Error:', error); }); </script>