Currently, I am working on an online exam project that requires the page to be automatically submitted after 10 minutes, regardless of whether the user clicks on the submit button or not. Additionally, I want to include a countdown timer to display the remaining time.
It is recommended to approach this in a simple manner, utilizing the [setInterval][1] function to create a countdown and trigger the postback action.
<div id="timer"></div>
<script type='text/javascript'>
var start = new Date();
setInterval(function() {
// calculate remaining time based on a target of 10 minutes from now
var timeLeft = (600000 - (new Date() - start))/1000;
// update timer display
document.getElementById('timer').innerHTML = Math.floor(timeLeft/60) + ":" + Math.floor(timeLeft%60);
// check if time has run out, then submit form
if (timeLeft > 0) {
document.forms[0].submit();
}
}, 1000);
</script>
Note: As suggested in the comments, it is advisable to verify the actual elapsed time rather than solely relying on the accuracy of setInterval.
One way to set a timeout for form submission is by using the "window.setTimeout" function. To create a countdown effect, consider incorporating a jQuery plugin such as the one found at:
Cheers!
window.setTimeout(
function ()
{
$("form")[0]
.submit();
},
10000
);
I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...
I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...
Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...
I'm currently attempting to use Selenium in C# to locate a button. <a id="1|0AqnCSdkjQ0|none" href="" target="_self" rel="nofollow" class="download_link 1">Download</a> I've already tried using the ID and class, but without success. ...
Normally, Tabulator limits the maximum width of the table and adds a horizontal scroll bar at the bottom. Is there a way to eliminate this scroll bar and make Tabulator expand the width of the table instead (resulting in the horizontal scrollbar appearin ...
Currently, I am working on developing an app to display news updates from a JSON API. The issue I am facing is that loading all the data from the JSON and filtering it using ng-repeat is causing slow performance, as there is a large amount of data. I woul ...
I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...
I have a specific file filled with essential global constants that I am attempting to bring into another JavaScript file. This way, I can utilize these constants within the code of the second file. globalConstant.js global.RoutesOffersPage = { routes: ...
Having some trouble with populating a JavaScript array using an Ajax request. Here is the code I'm working with. The Ajax portion seems to be running smoothly. function GetColumns() { var customArray = []; $.ajax({ url: '@Url.Con ...
Can you animate the colors of a loaded JSON model in three.js? In my code, I used the ObjectLoader() to render the model. Now, I want to be able to animate the color of the model after it's been loaded. var objectLoader = new THREE.ObjectLoa ...
Encountering the error 'Uncaught ReferenceError: req is not defined' when attempting to use req.query.id. Below is the content of my index.js file: const express = require("express"); const path = require("path"); const port = 8000; ...
I recently crafted a JavaScript script to accomplish a specific task, and overall it was working smoothly. However, as I attempted to simplify the code for a demonstration here on this platform, I encountered two issues. Unfortunately, during this 're ...
I have experience creating basic web applications where data is transmitted via HTTP parameters. However, I am currently attempting to send data from the client-side that includes an array (a list of ingredients for a recipe) and potentially a user-uploade ...
I'm facing an issue with my Angular 8 edit form that utilizes a form array. When I navigate to the page, the form array is not populated with values as expected. Can anyone help me identify and solve this problem? ngOnInit(): void { // Fetc ...
Is there a way to create a 'div' element in an HTML document and adjust the background transparency using CSS or Javascript/JQuery in order to achieve a look similar to Simple Calendar Widget or Glass Widgets from Android? I have tried using the ...
Consider this JSON object: { 'name' : 'John', 'friends' : [ { 'id' : 1, 'name' : 'George', 'level' : 10 }, { 'id' : 2, 'name ...
Hey there, this is my first time posting and I could really use some help... I'm struggling to make the $("[data-slider]").on('change.zf.slider', function(){}); event trigger. I've attempted using the id of the element like so $(" ...
Is there a way to test the onreadystatechange function on XMLHttpRequest or pure JavaScript AJAX without using jQuery? I need to do this because I'm working on a Firefox extension. It seems like I may have to use spies, but I'm having trouble bec ...
I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...
Currently, I am working on an input form that involves a select with various options. Depending on the user's selection, three additional fields need to be populated accordingly. For instance: If the user picks Option1, then the three other fields s ...