Dependable Timeout Functionality in JavaScript

We are currently developing an AngularJS application that presents users with questions and keeps track of the number of correct answers within a strict 20-minute time limit. However, there are some challenging requirements we need to consider:

Accuracy Concerns

It is imperative that the error for the 20-minute timeout does not exceed 2 seconds, even on slower devices such as Android 2.3 tablets or iPad 2.

Tolerance for Local Time Changes

The timing of the timeout should remain unaffected by any changes made to the computer's local time. We cannot automatically assume a user is cheating if such a change is detected, as it could be due to a legitimate NTP update.

Progress Monitoring

Users must be constantly reminded of the remaining time with a ticking countdown that accounts for any UI lag without accumulating errors.

-

We have explored various methods that did not meet our requirements:

  • windows.performance.now: not widely implemented (and not compatible with Mobile Safari)
  • Server pingbacks: cannot rely on a constant internet connection

Is it feasible to meet all of these requirements simultaneously?

Answer №1

It is crucial to have a backend system in place to handle the counting process. Relying solely on client-side operations for counting may result in the counter being reset when the site is reloaded.

Initially syncing the counter with the backend and then allowing it to count down on the client side can be a viable solution. To manage a 20-minute expiration, the backend can communicate this information using Server-sent events or nodejs.

Transferring the actual counter functionality to the backend eliminates the risk of cheating or delays that may occur on the client side.

To ensure the accuracy of the counter, regular synchronization with the backend at set intervals is recommended.

Answer №2

One suggestion is to experiment with utilizing $interval.

Explore the last sample provided on the given webpage for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying numbers in thousands, millions, or billions in vue.js

For example: 12000 can be shown as 12k, 1000000 as 1m, and 1430 as 1.4k. <div v-for="item in items" :key="item"> <span>{{item.num}}</span> </div> <script lang='ts'> items:any[]=[ {num:"122256879"}, ...

Having difficulty showcasing API call results in a Vue.js component

I am currently experimenting with Vue.js in an attempt to showcase results from a Wikipedia API call within a component using the v-for directive. However, I seem to be encountering some backend issues that I cannot pinpoint. To access the jsFiddle link, ...

Encountering CORS Error while trying to access Guest App in Virtualbox using Vue, Express, and Axios

I encountered an issue while trying to access my Vue app in Virtualbox from the host, both running on Linux Mint 20. Although I can now reach the login page from my host, I am consistently faced with a CORS error during login attempts: Cross-Origin Request ...

Selection List dictates the necessity of JavaScript

I need to create a JavaScript code that will require the comment field (textarea) when a selection is made from a list. Currently, I have added a required icon next to the comment section but I am stuck at this point. See the code below. Thank you in adva ...

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

Recursive React components. String iteration enhancement

In my React app, I am trying to create a string hierarchy from an object. The object structure is like this: { name: 'name1', parent:{ name: 'name2', parent:{ name: 'name3', parent: null }}} My plan is to use a state variable ...

Click to copy: Utilizing Italics in React Components

I've successfully implemented a way to copy text to the clipboard using React. Now, I'm facing the challenge of making only the content of this.state.parties italicized, while keeping the content of this.state.citation non-italicized when pasting ...

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

Form submission requires a checkbox to be checked

I have been searching for a way to make checkboxes required. Is there a method similar to using required="required"? Currently, I generate my checkboxes in the following manner and would really appreciate any guidance on this topic. It's crucial for m ...

What is the method for providing a date format choice in JSON?

I am encountering an issue in my PHP script where I use JSON to pass parameters. When I pass the date as "09-09-2015", it functions correctly. However, when I try to pass the date as $date, it does not work. How can I resolve this problem? $item1 = "test ...

Objects of equal nature combine and sift through

I am looking to categorize objects based on their status ID and also retrieve data and CSR counts for each item. Each StatusName has multiple items: [ { "StatusId": 2, "StatusName": "ordered", " ...

retrieve the complete webpage content, encompassing the .html file, images, .js files, css stylesheets, and more

I'm currently working on a project and could use some assistance. Is there a method available to download an entire page, including the .html file, images, .js files, css, etc., using PHP, JavaScript, or AJAX? <html> <body> & ...

What is the best way to update object values only when changes occur, and leave the object unchanged if no changes

There is an object named ApiData1 containing key-value pairs, including color values within properties. The colors are updated based on the numberOfProjects value from ApiData2, with specific ranges dictating the color updates. This setup is functioning co ...

Having trouble starting the server? [Trying to launch a basic HTML application using npm install -g serve]

I am in the process of creating a PWA, but I haven't reached that stage yet. Currently, I have only created an index.html file and an empty app.js. To serve my project locally, I installed serve globally using npm install -g serve When I run the co ...

The Angular 2 service is not transmitting the POST data in the correct format, although it functions properly when transmitted through PostMan

When the POST data is transmitted from the Angular 2 service in this manner: const data = new FormData(); data.append('date', '12/01'); data.append('weight', '170'); return this.http.post(this.u ...

Change classes of sibling elements using Angular 2

Imagine you have the following code snippet: <div id="parent"> <div class="child"> <div class="child"> <div class="child"> </div> I am looking to automatically assign the class active to the first child element. ...

Learn how to import MarkerClusterer from the React Google Maps library without using the require method

The sample provided utilizes const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");, however, I would prefer to use the import method. I attempted using: import { MarkerClusterer } from 'react-google-maps/lib ...

What is the best way to dynamically assign a value to ng-model using a template URL?

Recently, I started learning AngularJS and decided to create a directive that would load a template URL and allow me to change the ng-model value. Unfortunately, I encountered an issue where the value was not changing as expected. I attempted to replicate ...

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

Is there a way to use jQuery to retrieve the date and time from a timestamp within an input field?

Hey, I've encountered an issue with jQuery and the UI date picker. Currently, my NEW event form has 3 fields: Date, timeFrom, timeTo. In my SQL database, I have corresponding fields: Date(datetime), timeFrom(time), timeTo(time). When a user selects ...